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 для некоторых примеров.