We Keep Coding

Can't delete data (doc) from Firebase collection when using Redux and React

I'm getting into React and Redux and after spending a couple of hours on this problem, I'm still not able to delete a doc in Firebase using React and Redux.
I display a project summary in a dashboard and I try to add a delete button.
After the click on the button, the project is passed through to my projectActions.js action where I want to delete the project. After this, I want to send the type to the projectReducer.js. I don't receive an error and I can't output any console.log after the return when I click the button. I do get the project data into the removeProject() function.
I've tried to remove the return method in removeProject() and console.log the project which is passed on. I can get the project.id and add this to the firestore.collection.delete() function. But since nothing works after the return, this is not possible.
ProjectSummary.js:
import React, { Component } from 'react'
import moment from 'moment'
import { connect } from 'react-redux'
import { removeProject } from '../../store/actions/projectActions'
import { Link } from 'react-router-dom'
class ProjectSummary extends Component {
state = {
project: this.props.project
}
handleRemove = (e) => {
e.preventDefault()
removeProject(this.state.project)
}
render() {
const { project } = this.props
return (
<div className="card z-depth-0 project-summary">
<div className="card-content grey-text text-darken-3">
<Link key={project.id} to={'/project/' + project.id}>
<span className="card-title">{project.title}</span>
</Link>
<p>Posted by {project.authorFirstName} {project.authorLastName}</p>
<p className="grey-text">{moment(project.createdAt.toDate()).calendar()}</p>
<a className="waves-effect waves-light btn" onClick={this.handleRemove}>Remove</a>
</div>
</div>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
removeProject: (project) => dispatch(removeProject(project))
}
}
export default connect(null, mapDispatchToProps)(ProjectSummary)
projectActions.js:
export const removeProject = (project) => {
return (dispatch, getState, { getFirestore }) => {
const firestore = getFirestore()
firestore.collection('projects').doc(project).delete()
.then(() => {
dispatch({ type: 'REMOVE_PROJECT' })
}).catch(function(err) {
dispatch({ type: 'REMOVE_PROJECT_ERROR', err})
});
}
}
projectReducer.js:
const projectReducer = (state = initState, action) => {
switch (action.type) {
case 'CREATE_PROJECT':
console.log("Created Project", action.project)
return state
case 'CREATE_PROJECT_ERROR':
console.log('create project error', action.err)
return state
case 'REMOVE_PROJECT':
console.log('Removed Project')
return state
case 'REMOVE_PROJECT_ERROR':
console.log('Removed Project Error', action.err)
return state
default:
return state
}
}

put this on:
ProjectSummary.js
(…)
import { removeProject } from '../../store/actions/projectActions'
import { connect } from 'react-redux';
(…)
class ProjectSummary extends Component {
state = {
project: this.props.project
}
render() {
const { project, deleteProject} = this.props
(…)
<button onClick={ () => removeProject(project.id)}>Delete</button>
(…)
const mapDispatchToProps = (dispatch) => {
return {
removeProject: (id) => { dispatch(removeProject(id))},
}
}
export default connect(null, mapDispatchToProps)(ProjectSummary)
And
projectActions.js
(…)
export const removeProject = (id) => {
return (dispatch, getState, { getFirestore }) => {
const firestore = getFirestore()
firestore.collection('projects').doc(id).delete();
}
}

How can I refactor this ASYNC call in my react component to make it more readable?

I want my component to fetch an array of objects from the server. Each object is a message with author, body and date. I then want to render these messages in my react component.
My react component currently fetches data from the server before mounting. It will then store this message list in the redux state.|
I'm sure there's a better way of writing this code.
1. Can I place the fetch request in either the Action or Reducer file?
2. Can I write a function in the component to make the async call?
import React, { Component } from 'react';
import Message from '../components/message.jsx';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// Actions
import { fetchMessages } from '../actions/actions_index.js';
class MessageList extends Component {
constructor(props) {
super(props)
}
componentWillMount() {
fetch('https://wagon-chat.herokuapp.com/general/messages')
.then(response => response.json(),
error => console.log('An error occured receiving messages', error))
.then((data) => {
this.props.fetchMessages(data.messages);
});
}
render() {
return (
<div className="message-list">
{this.props.messageList.map( (message, index) => { return <Message key={index} message={message}/> })}
</div>
)
}
}
function mapStateToProps(state) {
return {
messageList: state.messageList
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(
{ fetchMessages: fetchMessages },
dispatch
)
}
export default connect(mapStateToProps, mapDispatchToProps)(MessageList);

Can I place the fetch request in either the Action or Reducer file?
The fetch request should be placed in action creator. Where the retrieved data will be dispatched to reducer later to manipulate the data, and lastly update the store to show on UI. Here's simple flow for most of react-redux app.
UI -> Action creator (calling request, saga etc..) -> reducer -> store -> UI
Can I write a function in the component to make the async call?
Yes, this should be called action creator, and you can see actions.js below for more reference.
I think you can safely follow this sample pattern where most tutorials out there apply. I'm assuming all files listed here are in the same directory.
constant.js
const MESSAGE_FETCH__SUCCESS = 'MESSAGE/FETCH__SUCCESS'
const MESSAGE_FETCH__ERROR = 'MESSAGE/FETCH__ERROR'
export {
MESSAGE_FETCH__SUCCESS,
MESSAGE_FETCH__ERROR
}
actions.js
import {
MESSAGE_FETCH__SUCCESS,
MESSAGE_FETCH__ERROR
} from './constant';
const fetchMessageError = () => ({
type: MESSAGE_FETCH__ERROR
})
const fetchMessageSuccess = data => ({
type: MESSAGE_FETCH__SUCCESS,
payload: data
})
const fetchMessages = () => {
const data = fetch(...);
// if error
if (data.error)
fetchMessageError();
else fetchMessageSuccess(data.data);
}
export {
fetchMessages
}
reducers.js
import {
MESSAGE_FETCH__SUCCESS,
MESSAGE_FETCH__ERROR
} from './constant';
const INIT_STATE = {
messageList: []
}
export default function( state = INIT_STATE, action ) {
switch(action.type) {
case MESSAGE_FETCH__SUCCESS:
return {
...state,
messageList: action.payload
}
case MESSAGE_FETCH__ERROR:
// Do whatever you want here for an error case
return {
...state
}
default:
return state;
}
}
index.js
Please read the comment I noted
import React, { Component } from 'react';
import Message from '../components/message.jsx';
import { connect } from 'react-redux';
// Actions
import { fetchMessages } from './actions';
class MessageList extends Component {
/* If you don't do anything in the constructor, it's okay to remove calling `constructor(props)`
*/
//constructor(props) {
// super(props)
//}
// I usually put this async call in `componentDidMount` method
componentWillMount() {
this.props.fetchMessage();
}
render() {
return (
<div className="message-list">
{
/* Each message should have an unique id so they can be used
for `key` index. Do not use `index` as an value to `key`.
See this useful link for more reference: https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js
*/
this.props.messageList.map( message => <Message key={message.id} message={message}/> )
}
</div>
)
}
}
function mapStateToProps(state) {
return {
messageList: state.messageList
}
}
export default connect(mapStateToProps, {
fetchMessages
})(MessageList);

You could use redux-thunk in an action called getMessages.
So:
(The double arrow func, is to return an action, see redux-thunk)
const getMessages = ()=>(dispatch, getState)=>{
fetch('https://wagon-chat.herokuapp.com/general/messages')
.then(response => response.json(),
error => dispatch(['error', error]))
.then((data) => {
dispatch(data);
})
}
Then you've successfully reduced your component to:
componentWillMount(){
this.props.getMessages()
}

I think #Duc_Hong answered the question.
And in my opinion, I suggest using the side-effect middle-ware to make AJAX call more structured, so that we could handle more complicated scenarios (e.g. cancel the ajax request, multiple request in the same time) and make it more testable.
Here's the code snippet using Redux Saga
// Actions.js
const FOO_FETCH_START = 'FOO\FETCH_START'
function action(type, payload={}) {
return {type, payload};
}
export const startFetch = () => action{FOO_FETCH_START, payload);
// reducer.js
export const foo = (state = {status: 'loading'}, action) => {
switch (action.type) {
case FOO_FETCH_STARTED: {
return _.assign({}, state, {status: 'start fetching', foo: null});
}
case FOO_FETCH_SUCCESS: {
return _.assign({}, state, {status: 'success', foo: action.data});
}
......
}
};
Can I place the fetch request in either the Action or Reducer file?
// Saga.js, I put the ajax call (fetch, axios whatever you want) here.
export function* fetchFoo() {
const response = yield call(fetch, url);
yield put({type: FOO_FETCH_SUCCESS, reponse.data});
}
// This function will be used in `rootSaga()`, it's a listener for the action FOO_FETCH_START
export function* fooSagas() {
yield takeEvery(FOO_FETCH_START, fetchFoo);
}
Can I write a function in the component to make the async call?
// React component, I trigger the fetch by an action creation in componentDidMount
class Foo extends React.Component {
componentDidMount() {
this.props.startFetch();
}
render() {
<div>
{this.props.foo.data ? this.props.foo.data : 'Loading....'}
<div>
}
}
const mapStateToProps = (state) => ({foo: state.foo});
const mapDispatchToProps = { startFetch }
export default connect(mapStateToProps, mapDispatchToProps) (Foo);
//client.js, link up saga, redux, and React Component
const render = App => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
combinedReducers,
initialState,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
store.runSaga(rootSaga);
return ReactDOM.hydrate(
<ReduxProvider store={store}>
<BrowserRouter><AppContainer><App/></AppContainer></BrowserRouter>
</ReduxProvider>,
document.getElementById('root')
);
}

how to call function inside reactjs render method properly?

I want to fetch data from server & show it inside tables. When I directly put code inside the render it works. But, When I encapsulate inside the addElementsToDisplay function & call that function inside render method it doesn't work. Actually, the function gets called, but response is not rendered in table format. Below is my code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Button } from 'semantic-ui-react';
import ResponseRenderer from './responseRenderer';
import "./App.css";
const responseDataContext = React.createContext({});
class App extends Component {
constructor(props) {
super(props);
this.getPastJobs = this.getPastJobs.bind(this);
this.addElementsToDisplay = this.addElementsToDisplay.bind(this);
this.state = { pastJobs: [] }
}
render() {
return (
<div className="App">
<Button onClick={this.getPastJobs}>Get Past Jobs</Button>
<h1> Hello, World! </h1>
{this.addElementsToDisplay()}
</div>
);
}
addElementsToDisplay() {
console.log("state: ", JSON.stringify(this.state));
this.state.pastJobs.map((value, index) => {
return <ResponseRenderer key={Math.random()} data={value} />
});
}
getPastJobs() {
fetch('http://localhost:9090/getPastJobs', {
method: 'POST',
body: JSON.stringify({})
})
.then((response) => {
if (response.status !== 200) {
return;
}
response.json().then((jobs) => {
console.log(jobs);
this.setState({ pastJobs: jobs.data })
});
})
.catch((err) => {
console.log(err.message, err.stack);
});
}
}
export default App;

You are not returning the response and hence it is not rendered, just return the mapped response and it will work fine
addElementsToDisplay() {
console.log("state: ", JSON.stringify(this.state));
return this.state.pastJobs.map((value, index) => {
return <ResponseRenderer key={Math.random()} data={value} />
});
}

How to refresh state using React, Redux, and redux-form

Fairly new to these technologies and am at wit's end. I've got two components; a parent which contains a form (using redux-form) and writes a new record to a database, and a child which lists some data.
The only thing I can't get to work is refreshing that child list when the form submit completes. If I refresh the page, the new data is visible. From what I had read, it was my understanding that by wiring up redux-form, that my state would refresh automatically...or something like that. Am I even going about this the right way? Here's everything...
My index reducer:
import { combineReducers } from 'redux';
import { reducer as formReducer } from "redux-form";
import ItemsReducer from "../reducers/items";
const rootReducer = combineReducers({
form: formReducer,
items: ItemsReducer
});
export default rootReducer;
My items reducer:
import { GET_ALL_ITEMS } from "../actions/items";
export default (state = {}, action) => {
switch (action.type) {
case GET_ALL_ITEMS:
return action.payload.data;
default:
return state;
}
}
My actions:
import axios from "axios";
export const GET_ALL_ITEMS = "GET_ALL_ITEMS";
export const SAVE_ITEM = "SAVE_ITEM";
const ROOT_API_URL = "http://myapi:3000/api";
export function getAllItems() {
let request = axios.get(`${ROOT_API_URL}/items`);
return {
type: GET_ALL_ITEMS,
payload: request
};
}
export function saveItem(item, callback) {
let request = axios
.post(`${ROOT_API_URL}/item`, item)
.then(() => callback());
return {
type: SAVE_ITEM,
payload: request
};
}
The (abbreviated) parent (list and form):
import ItemsList from "./items_list";
...
onSubmit = (item) => {
let { saveItem } = this.props;
saveItem(item, () => {
// this is successful
});
}
...
//the list in render()
<div>
<ItemsList />
</div>
...
//redux-form wired up at bottom
export default reduxForm({
form: "EditItemForm",
})(connect(null, { saveItem })(Items));
The child component:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getAllItems } from "../actions/items";
class Shows extends Component {
componentDidMount() {
this.props.getAllItems();
}
render() {
return(
<div className="body-content-partial">
{this.renderItems()}
</div>
);
}
renderItems() {
let { items } = this.props;
return items.map(item => {
return(
<a href="#" key={item.id}>
<div className="list-item-noavatar list-lines-div">
<div className="list-title">
{item.name}
</div>
<div className="status-div">
<span className="status-indicator"></span>
{item.active}
</div>
</div>
</a>
);
});
}
}
function mapStateToProps(state) {
return { items: state.items };
}
export default connect(mapStateToProps, { getAllItems })(Items);

OK, absolutely fixed it this time. I had to make a call to getAllItems() on the form submit as well as pass it into the dispatch portion of the connect() call, for the redux-form setup. Respectively:
import { saveItem, getAllItems } from "../actions/items";
...
onSubmit = (item) => {
let { saveItem, onSave, getAllItems } = this.props;
saveItem(item, () => {
onSave();
getAllItems();
});
}
...
export default reduxForm({
form: "ItemEditForm",
})(connect(null, { saveItem, getAllItems })(ItemEditForm));

In redux, my reducer is returning no results in the console

I am utilizing redux together with reactjs and applying the middleware "thunk" in between. In the action creator I am running an http request and I send the response as an object to the reducer and then the reducer returns that data.
I am trying to display that data in the console (or more importantly in the component to show in the front-page) but I seem to be doing it wrong. Here is the codes:
action creator
actions.js
export const SHOW_GALLERY = 'SHOW_GALLERY';
import axios from 'axios';
// FETCH THE IMAGES
export const actionGallery = () => {
return ( dispatch ) => {
axios.get('../images')
.then(res => {
if (res.status === 200) {
dispatch(showGalleryAsync(res.data));
}
})
.catch(err => console.error(err));
}
}
function showGalleryAsync(images) {
return {
type: SHOW_GALLERY,
payload: images
}
}
reducer
images.js
import { HEAD_SELECTED, SHOW_GALLERY } from '../actions/actions';
export function showGallery(state=[], action) {
switch(action.type) {
case SHOW_GALLERY:
let images = action.data;
let arr = [];
action.payload.map((i, index) => {
arr.push(i);
});
return arr;
default:
return state;
}
}
component
Gallery.js
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionGallery } from '../actions/actions';
class Gallery extends React.Component {
render() {
console.log(this.props);
return (
<div>
<h1>This is the Gallery.</h1>
<br />
<div className="container">
<div className="row">
<div className="col-md-8">
<h2>H2 h2 h2 2h2 </h2>
{ this.props.actionGallery.map((link, index) => {
return <img src={link}></img>
}) }
</div>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
showGallery: state.showGallery
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
actionGallery: actionGallery
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(Gallery);