Как отметить элемент, заполненный с помощью Redux?

77
7

Я играю с песочницей Redux todo.

Я изменил /components/TodoList.js, так как я не хочу использовать поле ввода и кнопку "Добавить todo", но я просто хочу иметь свои данные о машине. Вот мой код:

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), чтобы работать на "Ауди", "Ниссан" и "Мазда". Я также попытался рассмотреть другие вопросы, но не смог найти решение.

Как пометить автомобили "завершены"?

спросил(а) 2021-01-25T17:21:04+03:00 4 месяца, 2 недели назад
1
Решение
77

Проблема в том, что вы используете свой жесткий список автомобилей, а не состояние, возвращенное через 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

ответил(а) 2021-01-25T17:21:04+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема