Redux:过滤数据并倒带到 Reducer 中的初始数据状态?
Redux: Filter data & rewind to initial data state in Reducer?
假设我有大量 JSON 数据,我希望最初在页面加载时显示这些数据(目前有效),并且可以选择过滤该数据以仅显示特定数量。当我的 FILTER_DATA
动作被调度时,它检查 view
属性 并执行辅助函数来过滤数据数组,直到我需要显示的数量。
但是...如果我用数据的过滤版本更新状态,假设用户想返回到原始视图(整个数据集),是否存在一种将状态倒回到那个点的方法? 我正在考虑重新调度 FETCH_DATA
操作以重新执行 GET 请求以再次获取数据,但这似乎令人讨厌。想法?
下面是我的减速器:
注意:initialState 对象上的 data
是一个空数组值,直到 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;
}
谢谢。
有两个主要选项。首先,如果您真的想将 "filtered" 数据直接保存在您所在的州,您可以存储两个副本:"original" 和 "filtered" 版本。
我推荐的另一种方法是将原始数据和过滤条件都保留在您的状态中,但实际上不要修改原始数据。相反,根据需要在商店外派生过滤。这是 "selector functions" 的一个很好的用例。有关示例,请参阅 Computing Derived Data。
假设我有大量 JSON 数据,我希望最初在页面加载时显示这些数据(目前有效),并且可以选择过滤该数据以仅显示特定数量。当我的 FILTER_DATA
动作被调度时,它检查 view
属性 并执行辅助函数来过滤数据数组,直到我需要显示的数量。
但是...如果我用数据的过滤版本更新状态,假设用户想返回到原始视图(整个数据集),是否存在一种将状态倒回到那个点的方法? 我正在考虑重新调度 FETCH_DATA
操作以重新执行 GET 请求以再次获取数据,但这似乎令人讨厌。想法?
下面是我的减速器:
注意:initialState 对象上的 data
是一个空数组值,直到 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;
}
谢谢。
有两个主要选项。首先,如果您真的想将 "filtered" 数据直接保存在您所在的州,您可以存储两个副本:"original" 和 "filtered" 版本。
我推荐的另一种方法是将原始数据和过滤条件都保留在您的状态中,但实际上不要修改原始数据。相反,根据需要在商店外派生过滤。这是 "selector functions" 的一个很好的用例。有关示例,请参阅 Computing Derived Data。