Dispatching function does not "always" update the props - reactjs

Question

In my sample todo list app, I am trying to update all todos after creating or removing one so I can re-render the list component after changes. It sometimes updates the todos, but sometimes does not. I could not figure out the reason.
I am using Redux and Thunk. When a button is clicked, I dispatch "Create requested", then make async request, then dispatch "Create received", then dispatch fetchAllTodos(), and then catch "Create failed".
In the HomePage container, I pass this.props.todos to TodoList component as props. The problem I have is that it sometimes re-renders the list component with the changes, but sometimes does not. I also figured out in componentWillReceiveProps method that I do not get the updated props. Could this be related to a server issue or is it something I am doing wrong?
Here is how I set up the store:
const middlewares = [thunk];
const store = createStore(
combineReducers({
...reducers,
}),
compose(applyMiddleware(...middlewares))
);
Here is the fetchAllTodos() method:
export function fetchAllTodos() {
return dispatch => {
dispatch({
type: ALL_TODOS_REQUESTED
});
console.log('todos requested');
return SuperFetch.get('/todos')
.then(todos => {
console.log('todos received ' + todos.length);
dispatch({
type: ALL_TODOS_RECEIVED,
payload: todos
})
})
.catch(error => dispatch({
type: ALL_TODOS_FAILED,
payload: error
}));
}
Here is createTodo() method:
export function createTodo(description) {
const body = {description: description};
return dispatch => {
dispatch({
type: CREATE_TODO_REQUESTED
});
return SuperFetch.post(`/todos`, body)
.then(todo => dispatch({
type: CREATE_TODO_RECEIVED,
payload: todo
}))
.then(dispatch(fetchAllTodos()))
.catch(error => dispatch({
type: CREATE_TODO_FAILED,
payload: error
}));
}
}
Here is the reducer:
export default function todoReducer(state = initialState, action) {
switch (action.type) {
case ALL_TODOS_REQUESTED:
state = Object.assign({}, state, {todosLoading: true, todosError: null});
break;
case ALL_TODOS_RECEIVED:
state = Object.assign({}, state, {todos: action.payload, todosLoading: false, todosError: null});
break;
case ALL_TODOS_FAILED:
state = Object.assign({}, state, {todos: null, todosLoading: false, todosError: action.payload});
break;
// rest of it
return state
In HomePage, I just map state to props, and then pass the todos if they exist:
render() {
const {todos, error, loading} = this.props;
// if error part
if (todos && !loading) {
return (
<React.Fragment>
<Container text>
<TodoInput/>
</Container>
<Container style={{marginTop: '1em'}} text>
<TodoList todos={todos}/>
</Container>
</React.Fragment>
);
}
Might the problem be related to the fact that I am dispatching the action in TodoInput component and trying to update the TodoList? If so, how can I fix the problem because I do not want to dispatch all actions on the same HomePage container.

Answer 1

The problem is the way you manage state in your reducers. What you are doing is directly mutating an existing state, by doing state = blah which is against redux-priniciples. In order for redux to effectively recognize that a change has been made to the reducer, you must return a brand-new state object. Only then will your connected components re-render with the updated reducer data.
export default function todoReducer(state = initialState, action) {
switch (action.type) {
case ALL_TODOS_REQUESTED:
return {
...state,
todosLoading: true,
todosError: null
}
case ALL_TODOS_RECEIVED:
return {
...state,
todos: action.payload,
todosLoading: false,
todosError: null
}
case ALL_TODOS_FAILED:
return {
...state,
todos: null,
todosLoading: false,
todosError: action.payload
}
default:
return state
}
}

Answer 2

Problems is how you are updating the state in your reducer :
if todos is Object
state = {...state, {todos: {...action.payload, ...state.todos }, todosLoading: false, todosError: null}}
if todos is list
state = {...state, {todos: state.todos.concat(action.payload) }, todosLoading: false, todosError: null}}