Redux - 传递reducer一个动作似乎有未定义的id

Question

我做了basic redux todolist tutorial并且它有效但我想通过做一个小改动来了解代码。

我改变了：

操作/ 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中发生了一个奇怪的副作用 - 没有控制台错误但是点击一个待办事项列表项应该在完成之间切换它（在视觉上通过文字）并没有完成。现在单击列表项无效。

我正在努力将此减速器传递给定义为id的动作。

减速器/ todos.js：

这是调用toggleTodo(id)减速器的代码（查找箭头指向并说“HERE”）：

容器/ 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

所以ID来自onTodoClick。

部件/ TodoList.js：

所以我暂停一下，看看onTodoClick()的价值：

在original code中设置onTodoClick.id的位置，以便我可以再次重复它以定义onTodoClick.id（因此有希望导致点击待办事项成功切换）。

Answer 1

您正在寻找state.id !== action.id，但是您将其传递为action.payload.id，请执行以下操作：

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