Q:

How can I repeatedly filter an array?

So, now i'm making to-do-list, and i have problems with buttons 'active' and 'done' tasks. When i press one of these button, it has to return tasks which are done/active, and it returns, but only 1 time. I guess it makes a new array, and delete old array. So how to make filter, which won't delete my array and just filter tasks which are done or active? And every time I click on these buttons, I will be shown tasks filtered on done/active/all.
P.S. sorry for 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;

A:

Here is an example of how to store local state and pass it to ConnectedList as props.done.
ConnectedList has selectFilteredTasks as mapStateToProps and that is a selector created with reselect to get tasks, the second argument to this function is props so if props.done is not undefined it'll filter out the tasks that are done.

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 }) => (
  <ul>
    {tasks.map((task) => (
      <li key={task.id}>
        <pre>{JSON.stringify(task)}</pre>
      </li>
    ))}
  </ul>
);
const ConnectedList = connect(selectFilteredTasks)(List);
const App = () => {
  const [done, setDone] = useState();
  return (
    <div>
      <label>
        only done
        <input
          type="checkbox"
          onClick={() => setDone(done ? undefined : true)}
        ></input>
      </label>
      <ConnectedList done={done} />
    </div>
  );
};

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  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>

