Redux - Пропускающий редуктор, похоже, имеет неопределенный идентификатор

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. Ошибок в консоли нет, но щелчок на элементе списка todo должен переключать его между завершением (визуально имеет st rike через текст) и не завершено. Щелчок по элементу списка теперь не влияет.

Я изо всех сил пытаюсь передать этот редуктор действие, которое имеет определенный id.

редукторов/todos.js:

Это код, который вызывает toggleTodo(id) редуктора (смотрите на стрелки, указывающие и сказать "ЗДЕСЬ"):

контейнеров/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 

Таким образом, идентификатор исходит от onTodoClick.

компоненты/TodoList.js:

Так я паузу там и посмотреть значение onTodoClick():

Где в original code была его установка onTodoClick.id поэтому я могу повторить его снова, чтобы определить onTodoClick.id (таким образом, надеюсь y, заставляя щелкнуть элемент todo для переключения).

Answer 1

Вы ищете state.id !== action.id но передать его в качестве action.payload.id сделать следующее:

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