How to reset the state of a Redux store?

前端 未结 30 1907
陌清茗
陌清茗 2020-11-22 06:20

I am using Redux for state management.
How do I reset the store to its initial state?

For example, let’s say I have two user accounts (u1 and

相关标签:
30条回答
  • 2020-11-22 06:30

    Using Redux Toolkit and/or Typescript:

    const appReducer = combineReducers({
      /* your app’s top-level reducers */
    });
    
    const rootReducer = (
      state: ReturnType<typeof appReducer>,
      action: AnyAction
    ) => {
    /* if you are using RTK, you can import your action and use it's type property instead of the literal definition of the action  */
      if (action.type === logout.type) {
        return appReducer(undefined, { type: undefined });
      }
    
      return appReducer(state, action);
    };
    
    0 讨论(0)
  • 2020-11-22 06:32

    The following solution worked for me.

    I added resetting state function to meta reducers.The key was to use

    return reducer(undefined, action);
    

    to set all reducers to initial state. Returning undefined instead was causing errors due to the fact that the structure of the store has been destroyed.

    /reducers/index.ts

    export function resetState(reducer: ActionReducer<State>): ActionReducer<State> {
      return function (state: State, action: Action): State {
    
        switch (action.type) {
          case AuthActionTypes.Logout: {
            return reducer(undefined, action);
          }
          default: {
            return reducer(state, action);
          }
        }
      };
    }
    
    export const metaReducers: MetaReducer<State>[] = [ resetState ];
    

    app.module.ts

    import { StoreModule } from '@ngrx/store';
    import { metaReducers, reducers } from './reducers';
    
    @NgModule({
      imports: [
        StoreModule.forRoot(reducers, { metaReducers })
      ]
    })
    export class AppModule {}
    
    0 讨论(0)
  • 2020-11-22 06:33

    For me to reset the state to its initial state, I wrote the following code:

    const appReducers = (state, action) =>
       combineReducers({ reducer1, reducer2, user })(
         action.type === "LOGOUT" ? undefined : state,
         action
    );
    
    0 讨论(0)
  • 2020-11-22 06:34

    I've created a component to give Redux the ability of resetting state, you just need to use this component to enhance your store and dispatch a specific action.type to trigger reset. The thought of implementation is same as what @Dan Abramov said.

    Github: https://github.com/wwayne/redux-reset

    0 讨论(0)
  • 2020-11-22 06:34

    This approach is very right: Destruct any specific state "NAME" to ignore and keep others.

    const rootReducer = (state, action) => {
        if (action.type === 'USER_LOGOUT') {
            state.NAME = undefined
        }
        return appReducer(state, action)
    }
    
    0 讨论(0)
  • 2020-11-22 06:35

    why don't you just use return module.exports.default() ;)

    export default (state = {pending: false, error: null}, action = {}) => {
        switch (action.type) {
            case "RESET_POST":
                return module.exports.default();
            case "SEND_POST_PENDING":
                return {...state, pending: true, error: null};
            // ....
        }
        return state;
    }
    

    Note: make sure you set action default value to {} and you are ok because you don't want to encounter error when you check action.type inside the switch statement.

    0 讨论(0)
提交回复
热议问题