реагировать на переключение кнопки проверки в Redux Reactjs

Question

В настоящее время я изучаю Redux, и теперь у меня проблема в том, что флажок selectall должен работать, когда кто-то нажимает на эту кнопку.Результатом является то, что все флажки должны быть переключены (отметьте или снимите флажок).Но теперь я застрял в своей логике.Когда кто-то вызывает функцию selectAll, он должен перебирать все флажки ввода и с этого момента он должен ставить или снимать все флажки.

import React from 'react';
import { selectAll } from '../actions';
import { connect } from 'react-redux';

const CheckAll = () => {
    return (
        <div>
            TodoList <input type="checkbox" onChange={e => {
                e.preventDefault();
                selectAll()
                }}/>
        </div>
    )
}

const mapDispatchToProps = dispatch => {
    return {
        selectAll: () => dispatch({type: 'SELECT_ALL'})
    }
}

export default connect(mapDispatchToProps)(CheckAll);

import React from 'react';
import { connect } from 'react-redux';
import { removeTodo } from '../actions';

const TodoList = ({ todos, removeTodo }) => {
    return (
        <div>
             {todos.map((todo) => {
                return (
                    <li key={todo.id}>
                        // checkbox should be toggling here when somene clicks on the selectAll checkbox. 
                        <input type="checkbox" checkbox="false"/> 
                        {todo.text}
                        <span onClick={e => removeTodo(todo.id, 1)}>x</span>
                    </li>
                )
            } )}
         
        </div>
    )
}

const mapDispatchProps = dispatch => {
    return {
        removeTodo: id => dispatch(removeTodo(id))
    }
}

const mapStateToProps = state => {
    return {
        todos: state.reducer || []
    }
}

export default connect(mapStateToProps, mapDispatchProps)(TodoList);

// the reducer below

const reducer = (state = [], action) => {
    switch(action.type) {
        case 'ADD_TODO':
            return [
                ...state, 
                {
                    id: action.id,
                    text: action.payload,
                    completed: action.completed
                }
            ];
        case 'REMOVE_TODO':
            return state.filter(({id}) => id !== action.id);
        case 'SELECT_ALL':
            console.log('');
            const allMarked = state.every(action => action.completed);
           
            return state.map(todo => ({
                ...todo,
                completed: !allMarked
            }));
        default: 
            return state;
    }
}

export default reducer;

Мне нужен функциональный флажок, чтобы, когда каждый нажимает на этот флажок, он должен был быть отмечен или отключен.Но имейте в виду, что если пользователь нажимает на отдельную кнопку-флажок, это не должно влиять на кнопку проверки / снятия отметки.

Answer 1

Основная проблема в том, что ваши флажки не являются контролируемыми входами . Вы просматриваете свойство completed, чтобы увидеть, установлены ли флажки, но их значения не связаны с этим свойством и не обновляют состояние при их изменении. Вам нужно будет передать это значение входным данным как его свойство checked и добавить обработчик onChange, чтобы сохранить его текущим:

             {todos.map((todo, index) => {
                return (
                    <li key={todo.id}>
                        // checkbox should be toggling here when somene clicks on the selectAll checkbox. 
                        <input type="checkbox" checked={todo.completed} onChange={() => checkTodo(index)}/> 
                        {todo.text}
                        <span onClick={e => removeTodo(todo.id, 1)}>x</span>
                    </li>
                )
            } )}

А для обработчика вам нужно добавить новое действие и регистр редуктора:

case 'CHECK_TODO':
            const copy = Array.from(state);
            copy[action.index].completed = !copy[action.index].completed;
            return copy;
            break;

Вам, конечно, нужно добавить индекс к действию или использовать идентификатор, если хотите, и сопоставить его отправку. Также, как указал Junius , убедитесь, что вы правильно ссылаетесь на свои реквизиты, но я не думаю, что вам нужен this для функционального компонента, и, возможно, я просто никогда не видел его раньше, но я не думайте, что JSX-компонент будет отображаться без скобок:

const CheckAll = (props) => {
  return (
    <div>
      <TodoList/> <input type="checkbox" onChange={e => {
            e.preventDefault();
            props.selectAll()
      }}/>
   </div>
  )
}