如何在 redux 工具包中 return 默认状态?
How to return default state in redux toolkit?
我是 redux 工具包的新手。清除搜索输入后,我在这里尝试 return 我以前的状态。这是我的减速器,
const dataSlice = createSlice({
name: "data",
initialState: {
datas: [],
},
reducers: {
search: (state, action) => {
console.log(action.payload);
if (action.payload) {
state.datas = state.datas.filter((data) => {
return data.mission_name.toLowerCase().includes(action.payload);
});
}
},
},
extraReducers: {
[dataFetch.pending]: (state, action) => {
state.loading = true;
},
[dataFetch.fulfilled]: (state, action) => {
state.datas = action.payload;
state.loading = false;
},
[dataFetch.rejected]: (state, action) => {
state.error = action.payload;
},
},
});
当我发送搜索操作时,它 return 是我的新状态,但是当我清除搜索字段时,它 return 是一个空数组,但我想 return 我的以前的状态。我是新手。提前致谢。
您通常应该避免在减速器中保存过滤后的数据。相反,将原始数据保留在reducer中,然后根据需要在reducer外部(例如在组件中)过滤数据。这样您就可以在需要时始终获得原始数据。
附带说明一下,我们建议默认使用 extraReducers
的“构建器回调”形式,而不是“对象”形式:
https://redux-toolkit.js.org/api/createSlice#the-extrareducers-builder-callback-notation
我是 redux 工具包的新手。清除搜索输入后,我在这里尝试 return 我以前的状态。这是我的减速器,
const dataSlice = createSlice({
name: "data",
initialState: {
datas: [],
},
reducers: {
search: (state, action) => {
console.log(action.payload);
if (action.payload) {
state.datas = state.datas.filter((data) => {
return data.mission_name.toLowerCase().includes(action.payload);
});
}
},
},
extraReducers: {
[dataFetch.pending]: (state, action) => {
state.loading = true;
},
[dataFetch.fulfilled]: (state, action) => {
state.datas = action.payload;
state.loading = false;
},
[dataFetch.rejected]: (state, action) => {
state.error = action.payload;
},
},
});
当我发送搜索操作时,它 return 是我的新状态,但是当我清除搜索字段时,它 return 是一个空数组,但我想 return 我的以前的状态。我是新手。提前致谢。
您通常应该避免在减速器中保存过滤后的数据。相反,将原始数据保留在reducer中,然后根据需要在reducer外部(例如在组件中)过滤数据。这样您就可以在需要时始终获得原始数据。
附带说明一下,我们建议默认使用 extraReducers
的“构建器回调”形式,而不是“对象”形式:
https://redux-toolkit.js.org/api/createSlice#the-extrareducers-builder-callback-notation