还原/反应。过滤 Redux 状态后无法获取完整存储答案

【问题标题】：Redux/React. Cannot get full store after filtering the Redux state还原/反应。过滤 Redux 状态后无法获取完整存储
【发布时间】：2018-04-03 15:35:03
【问题描述】：

所以，我有一个简单的 todos 应用程序，在 Redux 上具有状态存储。我正在尝试对其进行正确的过滤，但我目前陷入了这个问题 - 我的过滤已经分割了我的状态存储，只是根据filter 中的条件用它需要的部分重新渲染状态reducer（VISIBLE_TODO_ALL 等）。

我也在 Redux 官方网站上看到了这个例子，但我无法弄清楚问题所在。还有这个帖子Redux: what is the correct way to filter a data array in reducer?，不过我没看清楚……

如果您知道，请帮助（...

/* 减速器 */

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

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

过滤后的数据不应处于redux状态，而是必须将整个数据保存在redux store中，并在显示时过滤掉

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

【讨论】：