Как сделать фильтрацию задач TO-DO-LIST с помощью React, Redux?

Question

Ребят напишите пожалуйста как сделать фильтрацию, которая фильтрует задания на 'done', 'active' , 'all'.. Примеры в интернете ужасные или очень старые. Актуального примера я не смог найти.

Вот мой Reducer + state.

import React from 'react'
import shortid from 'shortid';

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


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]
            }
        }

        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)
            }
        }



    default:
        return state
    }
}




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

В коннекте прописываешь что-то типа такого:

connect((state) => ({
    todos: state.tasks.filter((task) => task.status == 'done')
}), null)(YourElement);

и в компоненте получаешь доступ к ним через this.props.todos

БЛОГ НА HUSL

Как сделать фильтрацию задач TO-DO-LIST с помощью React, Redux?

Ответы (1 шт):