Redux:过滤数据&在Reducer中回退到初始数据状态?

时间:2016-09-28 22:24:47

标签: json filter redux reducers

假设我有大量的JSON数据,我希望最初在页面加载时显示(到目前为止工作)以及过滤该数据以仅显示特定数量的选项。调度我的FILTER_DATA操作时,它会检查view属性并执行帮助函数,以便将数据数组过滤到我需要显示的内容。

但是......如果我用数据的过滤版本更新状态,让我们说用户想要回到ORIGINAL视图(整个数据集),有没有办法倒带状态到那一点?我正在考虑重新调度FETCH_DATA动作以重新执行GET请求以再次获取数据,但这似乎是令人讨厌的。思考? 以下是我的减速机:

注意:initialState对象上的data是一个空数组值,直到FETCH_DATA_SUCCESS调度并将state.data设置为GET请求中提取的JSON数据。

const app = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_DATA:
      return { ...state, error: '', loading: true };
    case FETCH_DATA_SUCCESS:
      return { ...state, error: '', loading: false, data: action.data, view: 'all' };
    case FETCH_DATA_FAILURE:
      return { ...state, error: action.error, loading: false };
    case FILTER_DATA:
      let data;
      if (action.view === 'week') {
        data = groupData(getLastWeek(state.data), action.view);
      } else if (action.view === 'month') {
        data = groupData(getLastMonth(state.data), action.view);
      } else if (action.view === 'all') {
        data = state.data;
      }
      return { ...state, error: '', loading: false, data: data, view: view };
  }
  return state;
}

感谢。

1 个答案:

答案 0 :(得分:3)

有两个主要选择。首先,如果您确实希望直接在您所在的州保留“已过滤”的数据,则可以存储两个副本:“原始”和“过滤”版本。

我建议的另一种方法是将原始数据和过滤条件保持在您的状态,但不要实际修改原始数据。相反,根据需要在存储外部导出过滤。这是“选择器功能”的一个很好的用例。有关示例,请参阅http://redux.js.org/docs/recipes/ComputingDerivedData.html