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

Question

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

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

const customerReducer = combineReducer({
  profile,
  account
})

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

笔记：

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

Answer 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
})

回答：

要仅重置customerRedux Store 中的状态，您需要创建一个包装减速器，它将简单地将操作委托给您customerReducer，并且每当此包装减速器收到一种CUSTOMER/RESET类型的操作时，它都会重置客户状态：

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

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

请参阅：如何重置 redux 状态？