Currently stuck in my React/Redux learning journey. I encountered an issue while working on a sample todo app where the addTodo action is triggered upon adding a new todo, and I can step through the store.dispatch logic. However, the problem arises when the haveStatePropsChanged value is calculated as false, resulting in no child updates.
Below are the relevant code snippets:
import React from 'react';
import { connect } from 'react-redux';
import { store, addTodo, completeTodo, deleteTodo, clearTodo } from './TodoState.jsx';
class AddTodoForm extends React.Component {
...
}
class TodoItem extends React.Component {
....
}
let TodoList = ({items}) => (
<ul>
{items.map((item,index) =>
<TodoItem key={index} index={index} message={item.message} completed={item.completed}/>
)}
</ul>
)
let TodoComponent = ({ items, onAddTodo, onCompleteTodo, onDeleteTodo, onClearTodo }) =>
(
<div>
<h1>Todo</h1>
<AddTodoForm onAddTodo={onAddTodo} message/>
<TodoList items={items} onCompleteTodo={onCompleteTodo} onDeleteTodo={onDeleteTodo} onClearTodo={onClearTodo}/>
</div>
)
const mapStateToProps = (state) => {
return {
items: state.todo.items
}
}
const mapDispatchToProps = (dispatch) => {
return {
onAddTodo(message) {
dispatch(addTodo(message))
},
onCompleteTodo(index) {
dispatch(completeTodo(index))
},
onDeleteTodo(index) {
dispatch(deleteTodo(index))
},
onClearTodo(index) {
dispatch(clearTodo(index))
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoComponent);
The addTodo action is dispatched correctly by the AddTodoForm component, but the issue lies in the TodoList component not rendering again even though the items array is new.
UPDATE: The reducer indeed returns a new state.
Here is the reducer and action code:
import { createStore } from 'redux';
var defaultState = { todo: { items: [] } }
const ADD_TODO = 1;
const COMPLETE_TODO = 2;
const DELETE_TODO = 3;
const CLEAR_TODO = 4;
const addTodo = (message) => { return {type: ADD_TODO, message: message, completed: false} };
const completeTodo = (index) => { return {type: COMPLETE_TODO, index:index} };
const deleteTodo = (index) => { return {type: DELETE_TODO, index:index} };
const clearTodo = (index) => { return {type: CLEAR_TODO, index:index} };
function todoReducer(state,action) {
switch(action.type) {
case ADD_TODO:
var newState = Object.assign({},state);
newState.todo.items.push({message:action.message,completed:false});
return newState;
case COMPLETE_TODO:
var newState = Object.assign({},state);
newState.todo.items[action.index].completed = true;
return newState;
case DELETE_TODO:
var items = [].concat(state.todo.items);
items.splice(action.index,1);
return Object.assign({},state,{
todo: {
items:items
}
});
case CLEAR_TODO:
return Object.assign({},state,{
todo: {
items: []
}
});
default:
return state;
}
}
var store = createStore(todoReducer,defaultState);
export { store, addTodo, completeTodo, deleteTodo, clearTodo };
Thank you,
Aaron