【问题标题】：Best way to reset the nested state with using combine reducer in redux-toolkit在 redux-toolkit 中使用 combine reducer 重置嵌套状态的最佳方法
【发布时间】：2020-08-30 04:40:00
【问题描述】：

假设我的商店带有嵌套的 combineReducers，如下所示

const rootReducer = () =>
  combineReducers({
    agent,
    customer: customerReducer
  });

const customerReducer = combineReducer({
  profile,
  account
})

在这种情况下，如果我想将完整的客户状态重置为其初始状态，我该怎么做？

注意：

"@reduxjs/toolkit": "^1.3.5",
"typescript": "^3.8.3"

【问题讨论】：

嗨 Sunil，欢迎来到 Stack Overflow。您能否在上面的帖子中添加您迄今为止尝试过的内容？

标签： reactjs typescript react-redux redux-toolkit

【解决方案1】：

商店配置：

假设这是您的商店使用reduxjs/toolkit配置的方式：

const store = configureStore({
  reducer: rootReducer,
  middleware: [
    ...getDefaultMiddleware(),
  ],
})

export default store

rootReducer 在哪里：

const rootReducer = combineReducers({
  agent: agentReducer,
  customer: customerReducer
});

其中customerReducer 嵌套，即两个其他减速器的组合：

const customerReducer = combineReducer({
  profile,
  account
})

答案：

要在 Redux Store 中reset 仅customer 状态，您需要创建一个 wrapper 减速器，它将简单地将操作委托给您的 customerReducer 并且无论何时wrapper reducer 收到 CUSTOMER/RESET 类型的操作，它重置客户状态：

const customerReducerWrapper = (state, action) => {
  if (action.type === 'CUSTOMER/RESET') {
    state = undefined
  }
  return customerReducer(state, action)
}

const rootReducer = combineReducers({
  agent: agentReducer,
  customer: customerReducerWrapper
});

见：How to reset redux state?

【讨论】：

感谢您的帮助。