Redux: фильтровать данные и перематывать их в исходное состояние в Reducer?

Допустим, у меня есть большой объем данных JSON, которые я хочу первоначально отобразить при загрузке страницы (пока работаю), и возможность фильтровать эти данные, чтобы отображать только определенное количество. Когда мой FILTER_DATA действие отправлено, оно проверяет view свойство и выполняет вспомогательные функции, чтобы отфильтровать массив данных, насколько это мне нужно отобразить.

Однако... если я обновляю состояние с помощью отфильтрованной версии данных и, скажем, пользователь хочет вернуться к ОРИГИНАЛЬНОМУ представлению (всему набору данных), есть ли способ перемотать состояние к этой точке? Я думал о повторной отправке FETCH_DATA действие для повторного выполнения запроса GET для получения данных еще раз, но это кажется неприятным. Мысли? Ниже мой редуктор:

Замечания: data на объект initialState является пустым значением массива до FETCH_DATA_SUCCESS рассылки и комплекты state.data к данным JSON, извлеченным в запросе GET.

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 ответ

Решение

Есть два основных варианта. Во-первых, если вы действительно хотите сохранить "отфильтрованные" данные непосредственно в своем состоянии, вы можете сохранить две копии: "оригинальную" и "отфильтрованную" версии.

Другой подход, который я рекомендую, состоит в том, чтобы сохранить исходные данные и критерии фильтрации в вашем состоянии, но на самом деле не изменять исходные данные. Вместо этого извлекайте фильтрацию за пределами магазина по мере необходимости. Это отличный пример использования "функций селектора". См. http://redux.js.org/docs/recipes/ComputingDerivedData.html для некоторых примеров.

Другие вопросы по тегам