reactjs - 在 redux-toolkit 中使用 combine reducer 重置嵌套状态的最佳方式

假设我有一个如下的带有嵌套 combineReducers 的商店

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

const customerReducer = combineReducer({
  profile,
  account
})

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

注意：

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

答案＃1

商店配置：

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

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

export default store

其中 rootReducer 是:

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

并且当 customerReducer 是 嵌套的，即 由另外两个 reducers 组合而成时：

const customerReducer = combineReducer({
  profile,
  account
})

回答：

要在你的 Redux 存储中仅 重置 customer 状态，你需要创建一个 包装 reducer，它将简单地将动作委托给你的 customerReducer，并且每当这个包装 reducer 接收到 CUSTOMER/RESET 类型的动作时，它会 重置 customer 状态：

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

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

参见：如何重置 redux 状态？