Javascript 无法使用react和redux在todo列表中添加todo。我做错了什么？

当I console.log

this.props.todos.length

时，它返回值2，

this.state.value

返回输入中键入的值。但是“添加项目”按钮不起作用

我已经将

submitNewTodo

映射到dispatch

addTodo（newTodo）

像这样

const-mapDispatchToProps=（调度）=>{
返回{
submitNewTodo：函数（newTodo）{
调度（addTodo（newTodo））；
}
}
}

完整的代码在此代码笔中

---

我注意到您的代码的第一件事是，您的reducer没有遵循Redux使用的模式

   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>
    </>
  }

它违反的第一条规则是，这应该是一个开关，而不是if语句

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;
  }
}

第二条规则是，您希望始终具有有效负载属性，以遵循正确的流量模式。该有效载荷将包含您的所有数据

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,
    }

}

---

您的

addTodo

操作创建者错误：

const addTodo=（todo）=>{
键入：“ADD_TODO”，
待办事项
};

这是一种治疗癌症的方法

type:'ADD_TODO'，
待办事项

作为一个方法体。（

类型

用作字符串

'ADD_TODO'

的中断标签，后跟

TODO

）

如果要返回操作，以下两种符号是正确的：

const addTodo=（todo）=>{
返回{
键入：“ADD_TODO”，
待办事项
}
};
//注意这些偏执！
常量addTodo=（todo）=>({
键入：“ADD_TODO”，
待办事项
});

我已经使用了react redux中的connect组件，比如so

const Container=connect（MapStateTops，mapDispatchToProps）（演示版）你可以在这里查看我的应用程序的全部代码：嗨，这里是random redux maintainer。只是想澄清一下：切换可能是惯例（并且仅在旧的redux样式中，一般来说是非常不同的），但肯定不是固定的规则。有效负载属性也是如此。这不是必须的，只是惯例。公平地说，我认为这不会阻止代码的编译，但它肯定会使调试更容易。另外，一般观察：这是一种非常古老的redux风格，如果您现在正在学习redux，您可能正在遵循一个非常古老的教程stat，它教您一种redux风格，这种风格最终会比实际需要的时间更长。请遵循官方教程：
const addTodo = (todo) => {
  type: 'ADD_TODO',
  payload: {
    todo,
  }
};