Redux - レデューサーを渡すと、アクションに定義されていないIDがあるようです。

Question

私はbasic redux todolist tutorialを実行しましたが、うまくいきましたが、小さな変更を加えることでコードを知りたかったのです。

私が変更されました：

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

そして、私はそれに取り組んでTODO奇妙な副作用を追加しました：これまで

アクション/ index.js

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

をtoggleTodoで発生しました - コンソールエラーはありませんが、ToDoリスト項目をクリックすると完了している間に切り替えることになっています（視覚的にstテキストを突き抜けて）完成していない。リスト項目をクリックしても効果はありません。

この還元剤には、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を定義する（したがって、希望todo項目をクリックすると正常に切り替わります）。

Answer 1

あなたはstate.id !== action.idを探しているが、あなたは次の操作を行うaction.payload.idとしてそれを渡す：

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