Redux/React. Cannot get full store after filtering the Redux state

Question

So, I have a simple todos app with state storage on Redux. I'm trying to make a right filtering for it, but I currently fall into the problem - my filtration has slice my state storage, insted of just rerender the state with a needed part of it, based on the condition in the filter reducer (VISIBLE_TODO_ALL and other).

I also saw the example on the official Redux website, but I cannot figure out the problem. And this post Redux: what is the correct way to filter a data array in reducer? , but I do not undertand it clear...

Please, if you know - help (...

/* REDUCERS */

import { combineReducers } from 'redux'
import {ADD_TODO, 
        FORK_TODO, 
        ADDED_BUTTON, 
        TOGGLE_BUTTON,
        EDIT_TODO, 
        DELETE_TODO, 
        FILTER_TODO_UP, 
        FILTER_TODO_DOWN,
        CHANGE_STATUS,
        VISIBLE_TODO_ALL,
        VISIBLE_TODO_ACTIVE,
        VISIBLE_TODO_DONED } from '../Variables/Variables'

const initialState = {
    iteams: {
        todos:[],
        buttons:[]
    }
}

function TodoApp(state, action) {
    if (typeof state === 'undefined') {
        return initialState;
    }

    switch (action.type) {
        case ADD_TODO:
        console.log(state.iteams);
            return Object.assign({}, state, {
                iteams: {
                    todos: [
                        ...state.iteams.todos, 
                        {
                            id: action.id,
                            text: action.text + '___' + action.id,
                            status: action.status
                        }
                    ],
                    buttons: [
                        ...state.iteams.buttons, 
                        {
                            id: action.id,
                            done: false,
                            status: action.status
                        }
                    ]
                }
            });
        case CHANGE_STATUS:
        console.log(state.iteams, action.status);
            return {
                iteams: {
                    todos: [
                        ...state.iteams.todos.map(todo => {
                            return (todo.id === parseInt(action.id) 
                                    && todo.status !== action.status) 
                                ? {...state.iteams.todo, 
                                    id: todo.id,
                                    text: todo.text,
                                    status: action.status
                                } : todo
                            })
                    ],
                    buttons: [
                        ...state.iteams.buttons.map(button => {
                            return (button.id === parseInt(action.id) 
                                    && button.status !== action.status) ?
                                {...state.iteams.button, 
                                    id: button.id,
                                    done: button.done,
                                    status: action.status
                                } : button
                        })
                    ]
                }
            };
        case VISIBLE_TODO_ALL:
        console.log('VISIBLE_TODO_ALL', state.iteams);
            return Object.assign({}, {
                ...state
            });
        case VISIBLE_TODO_ACTIVE:
        console.log('VISIBLE_TODO_ACTIVE', state.iteams);
            return Object.assign({}, {
                iteams: {
                    todos: state.iteams.todos.filter(iteam => 
                        iteam.status === 'active'

                    ),
                    buttons: state.iteams.buttons.filter(button => 
                        button.status === 'active'
                    )
                }
            });
        case VISIBLE_TODO_DONED:
        console.log('VISIBLE_TODO_DONED', state.iteams);
            return Object.assign({}, {
                iteams: {
                    todos: state.iteams.todos.filter(iteam => 
                        iteam.status === 'done'
                    ),
                    buttons: state.iteams.buttons.filter(button => 
                        button.status === 'done'
                    )
                }
            });
        default: 
            return state;
    }
}

export default TodoApp

Answer 1

The filtered data should not be in redux state, instead you must keep the entire data in redux store and filter out while displaying like

class Todos extends React.Component {
   render() {
      const { filterParam } = this.props;
      return (
          <div>{this.props.todoItems.todos && 
                   this.props.todoItems.todos.filter(iteam => 
                        iteam.status === filterParam
                    ).map(todo => {
               return <div>{todo}</div>
          })}</div>
      )
   }
}
const mapStateToProps(state) {
   todoItems: state.iteams
}
export default connect(mapStateToProps)(Todos);