无法使用 react 和 redux 在待办事项列表中添加待办事项。 我究竟做错了什么？

Question

   render() {
    const listItems = this.props.todos.map((todo) =>
      <ListItem key={todo.id} id={todo.id} content={todo.content} onEdit={this.onEditItem}/>
    )
    return <>
      <ul className="todo-list">
        {listItems}
      </ul>
      {/* <AddItem/> */}
      <div className="add-item">
        <input type="text" onChange={this.onChangeValue}/>
        <button type="submit" onClick={this.onAddItem}>Add Item</button>
      </div>
    </>
  }

onAddItem = () => {
    this.props.submitNewTodo({ id: this.props.todos.length + 1, content: this.state.value})
    };

When I console.log this.props.todos.length it returns the value 2 and this.state.value returns the value typed into the input. But the "Add Item" button doesn't work.

I have mapped submitNewTodo to dispatch addTodo(newTodo) like so

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewTodo: function(newTodo) {
      dispatch(addTodo(newTodo));
    }
  }
}

Complete code is in this codepen.

https://codepen.io/blenderous/pen/MWjdyoN?editors=0011

Answer 1

Your addTodo action creator is wrong:

const addTodo = (todo) => {
  type: 'ADD_TODO',
  todo
};

this is a method that treats

  type: 'ADD_TODO',
  todo

as a method body. ( type being used as the break label for the string 'ADD_TODO' , followed by todo )

If you want to return an action, these two notations are correct:

const addTodo = (todo) => {
  return {
    type: 'ADD_TODO',
    todo
  }
};
// note the parantheses!
const addTodo = (todo) => ({
  type: 'ADD_TODO',
  todo
});

Answer 2

The first thing I notice with your code is that your reducer is not following the pattern Redux uses.

const todoReducer = ( state = [{ id: 1, content: "Call Client" },
       { id: 2, content: "Write Log" }], action ) => {
  if (action.type == ADD_TODO) {
    return state.concat(action.todo);
  }
  else {
    return state;
  }
}

The first rule that it breaks is that this should be a switch, not an if statement.

switch (action.type) {
  case 'ADD_TODO':
    // create new todos with the added todo
    const newTodos = [
      ...state.todos,
      action.payload.todo,
    ]
    
    // new state object
    return {
      ...state,
      todos: newTodos,
    }

  default:
    return {
      ...state,
    }

}

The second rule is that you want to always have a payload property to follow the proper flux patterns. That payload would contain all of your data.

const addTodo = (todo) => {
  type: 'ADD_TODO',
  payload: {
    todo,
  }
};