Best way to reset the nested state with using combine reducer in redux-toolkit

user_10141540 0
Viewed 2160

let say I have my store with nested combineReducers as below

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

const customerReducer = combineReducer({
  profile,
  account
})

In this case if I want to reset the full customer state to its initial state how can I do that?

Note: 

"@reduxjs/toolkit": "^1.3.5",
"typescript": "^3.8.3"
react-redux redux-toolkit typescript reactjs
1 Answers

Store Configuration:

Assuming this is how your store is configured using reduxjs/toolkit:

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

export default store

where the rootReducer is:

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

And where customerReducer is nested, i.e. combination of two other reducers:

const customerReducer = combineReducer({
  profile,
  account
})

Answer:

To reset only customer state in your Redux Store, you need to create a wrapper reducer which will simply delegate the action to your customerReducer and whenever this wrapper reducer receives a CUSTOMER/RESET type of action, it resets the customer state:

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

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

See: How to reset redux state?

user_28735380
Related