Блог

В старые времена, когда я хотел очистить магазин redux при выходе из системы, например, в моем главном редукторе, я бы сделал:

 const appReducer = (state, action) => combineReducers(
    {myreducer1,
    myreducer2} 
)(state, action)

const rootReducer = (state, action) => {
    if (action.type === 'LOGIN_LOGGED_OUT') {
        state = undefined
    }
    return appReducer(state, action)
}

export default rootReducer;
 

но новая версия redux просто отправляет объект истории, поэтому я больше не могу получить доступ к своему состоянию и действиям, поэтому я не могу очистить свой редуктор.
Есть идеи, как я могу изменить этот код, чтобы он работал как приведенный выше код?

 const rootReducer = (history) => combineReducers({ 
    {myreducer1,
    myreducer2} 
    )
 

 const rootReducer = (history) => 
  combineReducers({ 
    myreducer1,
    myreducer2,
  });
 

Это возвращает функцию редуктора, поэтому вы можете создать другую функцию редуктора более высокого порядка. Например, вот как моя команда обрабатывает состояние сброса.

 const reducer = history =>
  combineReducers({
    .... all the reducers
  });

const reducerWithReset = history => (state, action) => {
  let resetState;

  switch (action.type) {
    case RESET_STATE:
      resetState = undefined;
      break;

    case LOGOUT_SUCCESS:
      resetState = deriveLogoutState(state);
      break;

    .... other cases

    default:
      resetState = state;
  }
  return reducer(history)(resetState, action);
};

export default reducerWithReset;
 

Затем при инициализации хранилища redux мы используем экспортированный reducerWithReset «rootReducer» и просто передаем history ему объект.

 configureStore({
  devTools: {
    .....
  },
  reducer: rootReducer(history),
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      .... configs
    }).concat(
      .... additional middlewares
    ),
  preloadedState: state,
});