Redux

Question

我做了 basic redux todolist tutorial 并且成功了，但我想通过做一些小改动来了解代码。

我改了：

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

我添加了一个待办事项，但在 toggleTodo 中出现了一个奇怪的副作用 - 没有控制台错误，但单击待办事项列表项应该在完成之间切换（视觉上有一个罢工通过文本）并且未完成。现在单击列表项无效。

我正在努力向这个减速器传递一个定义了 id.

的动作

reducers/todos.js:

这是调用 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

所以 ID 来自 onTodoClick。

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

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

Redux - Passing reducer an action seems to have undefined id

react-redux