如何標記用Redux完成的項目？

Question

我正在玩the Redux todo example sandbox。

我改變了/components/TodoList.js，因爲我不想使用輸入字段和「添加待辦事項」按鈕，但我只想擁有自己的汽車數據。這裏是我的代碼：

import React from 'react' 
import PropTypes from 'prop-types' 
import Todo from './Todo' 

const cars = [ 
    {text: 'Audi', id: 1}, 
    {text: 'Nissan', id: 2}, 
    {text: 'Mazda', id: 3}, 
] 

const TodoList = ({ todos, onTodoClick }) => (
    <ul> 
    {cars.map(todo => 
     <Todo 
     key={todo.id} 
     {...todo} 
     onClick={() => onTodoClick(todo.id)} 
     /> 
    )} 
    </ul> 
) 

export default TodoList 

我該如何獲得切換工作（我的意思是標記汽車完成：true || false）？ 在/reducers/todos.js我有以下幾點：

const todos = (state = [], action) => { 
    switch (action.type) { 
    case 'ADD_TODO': 
     return [ 
     ...state, 
     { 
      id: action.id, 
      text: action.text, 
      completed: false 
     } 
     ] 
    case 'TOGGLE_TODO': 
     return state.map(todo => 
     (todo.id === action.id) 
      ? {...todo, completed: !todo.completed} 
      : todo 
    ) 
    default: 
     return state 
    } 
} 

export default todos 

這部分顯然是錯誤的：

(todo.id === action.id) 

我嘗試過各種東西，但無法得到的觸發（完成：true || false）在「奧迪」，「日產」和「馬自達」上工作。我也試着查看其他問題，但找不到解決方案。

如何標記汽車「已完成」？

Answer 1

這裏的問題是你使用硬編碼的汽車列表，而不是通過Redux返回的狀態。不管你派遣什麼，變量cars從不更新，因此永遠不會收到切換狀態。

這裏的解決方案是在最初的Redux狀態下使用汽車列表。

const initialState = [ 
    { text: 'Audi', id: 1, completed: false }, 
    { text: 'Nissan', id: 2, completed: false }, 
    { text: 'Mazda', id: 3, completed: false } 
] 

const todos = (state = initialState, action) => { 
    switch (action.type) { 
    case 'ADD_TODO': 
    return [ 
     ...state, 
     { 
     id: action.id, 
     text: action.text, 
     completed: false 
     } 
    ] 
    case 'TOGGLE_TODO': 
    return state.map(todo => 
     (todo.id === action.id) 
     ? {...todo, completed: !todo.completed} 
     : todo 
    ) 
    default: 
    return state 
    } 
} 

export default todos