如何在 redux 工具包中返回默认状态？

Posted 2023-02-19

【中文标题】如何在 redux 工具包中返回默认状态？

【英文标题】：How to return default state in redux toolkit?

【发布时间】：2021-11-29 02:03:49

【问题描述】：

我是 redux 工具包的新手。在这里，我试图在清除搜索输入后返回我以前的状态。这是我的减速器，

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;
    ,
  ,
);

当我发送我的搜索操作时，它会返回我的新状态，但是当我清除搜索字段时，它会返回一个空数组，但我想返回我之前的状态。我是新手。提前致谢。

【参考方案1】：

您通常应该避免将过滤后的数据保存在 reducer 中。相反，将原始数据保留在reducer中，然后根据需要在reducer之外过滤数据（例如在组件中）。这样一来，您始终可以在需要时获得原始数据。

附带说明，我们建议使用extraReducers 的“构建器回调”形式作为默认值，而不是“对象”形式：

https://redux-toolkit.js.org/api/createSlice#the-extrareducers-builder-callback-notation

【讨论】：

感谢您的精彩回答。我也很想知道有什么方法可以在需要时过滤状态值并重置以前的值？就像 redux 商店一样，我们可以过滤状态值并设置默认状态。