Как я могу повторно фильтровать массив?

Question

Итак, сейчас я делаю список дел, и у меня проблемы с кнопками «активные» и «готовые» задачи. Когда я нажимаю одну из этих кнопок, она должна возвращать задачи, которые выполнены / активны, и она возвращается, но только 1 раз. Я думаю, это создает новый массив и удаляет старый массив. Итак, как сделать фильтр, который не будет удалять мой массив и просто фильтровать задачи, которые выполнены или активны? И каждый раз, когда я нажимаю на эти кнопки, мне будут отображаться задачи, отфильтрованные по выполненным / активным / всем.

PS извините за ENG

onst ADD_TASK = 'ADD_TASK'
const EDIT_STATUS = 'EDIT_STATUS'
const TASK_DELETE = 'TASK_DELETE'

const DONE_TASK = 'DONE_TASK'
const ACTIVE_TASKS = 'ACTIVE_TASKS'




const initialState = {
    tasks: []
};


const mainReducer = (state = initialState, action) => {
    switch (action.type) {

        case ADD_TASK: {
            return {
                ...state,
                tasks: [{
                    id: shortid.generate(),
                    task: action.task,
                    status: false
                }, ...state.tasks], filter: 'all'
            }
        }

        case EDIT_STATUS: {
            return {
                ...state,
                tasks: state.tasks.map(task => task.id === action.id ? {...task, status: !task.status} : task)
            }
        }

        case TASK_DELETE: {
            return {
                ...state,
                tasks: state.tasks.filter(t => t.id !== action.id)
            }
        }

        case DONE_TASK: {
            return {
                ...state,
                tasks: state.tasks.filter(t => !t.status),
                filter: 'done'
            }
            return state.tasks
        }


        case ACTIVE_TASKS: {
            return {
                ...state,
                tasks: state.tasks.filter(t => t.status),
                filter: 'active'
            }
            return state.tasks
        }

    default:
        return state
    }
}

export const doneTask = () => ({type: 'DONE_TASK'})
export const activeTask = () => ({type: 'ACTIVE_TASKS'})




export const addTask = task => ({type: 'ADD_TASK', task});
export const editStatus = id => ({type: 'EDIT_STATUS', id})
export const deleteTask = id => ({type: 'TASK_DELETE', id})


export default mainReducer;

Answer 1

Вот пример того, как сохранить локальное состояние и передать его в ConnectedList как props.done.

В ConnectedList есть selectFilteredTasks как mapStateToProps, и это селектор, созданный с помощью , повторно выбрав для получения задач, вторым аргументом этой функции является props, так что если props.done не равен undefined, он отфильтрует выполненные задачи.

const { useState } = React;
const {
  Provider,
  connect,
} = ReactRedux;
const { createStore } = Redux;
const { createSelector } = Reselect;
const state = {
  tasks: [
    {
      id: 1,
      task: 'one',
      status: false,
    },
    {
      id: 2,
      task: 'two',
      status: true,
    },
  ],
};
const store = createStore(
  (x) => x, //won't dispatch any actions
  { ...state },
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
);
//selectors
const selectTasks = (state) => state.tasks;
const selectFilteredTasks = createSelector(
  selectTasks,
  (_, { done }) => done, //get the second argument passed to selectFilteredTasks
  (tasks, done) =>
    done !== undefined
      ? {
          tasks: tasks.filter(
            (task) => task.status === done
          ),
        }
      : { tasks }
);
const List = ({ tasks }) => (
  
    {tasks.map((task) => (
      
        {JSON.stringify(task)}

))} ); const ConnectedList = connect (selectFilteredTasks) (Список); const App = () => {const [готово, setDone] = useState (); возврат (

только сделано setDone (сделано? undefined: true)}>

); }; ReactDOM.render ( , document.getElementById ('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>


<div id="root"></div>

Answer 2

Я предлагаю вам go с другим подходом. В функции нажатия кнопки вы можете получить все задачи и вернуть отфильтрованные задачи, которые являются активными / завершенными вместо выполнения операции с редуктором.