Redux-传递的操作似乎具有未定义的id

我做了一个小的修改，它工作了，但是我想通过做一个小的修改来了解代码

我改变了：

操作/index.js

let nextTodoId = 0
export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

为此：

let nextTodoId = 0
export const addTodo = (text) => {
   return {
      type: 'ADD_TODO',
      payload: {
         id: nextTodoId++,
         text: text
      }
   }
}

我得到了添加todo的方法，但是toggleTodo中出现了一个奇怪的副作用-没有控制台错误，但是单击todo列表项应该在完成（视觉上通过文本进行了删除）和未完成之间进行切换。单击列表项现在没有效果

我正在努力向这个reducer传递一个定义了

id

的操作

reducers/todos.js:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id)) <-------------HERE
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

这是调用

toggleTodo（id）

reducer（查找指向并显示“HERE”的箭头）的代码：

containers/visibleTodoList.js:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id)) <-------------HERE
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

从'react redux'导入{connect}
从“../actions”导入{toggleTodo}
从“../components/TodoList”导入TodoList
常量getVisibleTodos=（todos，过滤器）=>{
开关（过滤器）{
“全部展示”案例：
返回待办事项
案例“SHOW_COMPLETED”：
返回todos.filter（t=>t.completed）
案例“SHOW_ACTIVE”：
返回todos.filter（t=>！t.completed）
}
}
常量mapStateToProps=（状态）=>{
返回{
todos:getVisibleTodos（state.todos，state.visibilityFilter）
}
}
const mapDispatchToProps=（调度）=>{
返回{
onTodoClick：（id）=>{
dispatch（toggleTodo（id））您正在查找
state.id！==action.id
但您将其作为
action.payload.id
传递，请执行以下操作：

case 'TOGGLE_TODO':
 if (state.id !== action.payload.id) {
  return state
 }

是的，因为id属性被重新定位