reactjs
redux

reducerのstateをrootレベルでリセットしたい

書くこと

combineReducersでreducerを分割しているケースで、例えばユーザのログアウト時にすべてのreducerをリセットする方法

前提

userとmessageのリソースがあり、messageは、userが所有しているものとし、
userがログアウトされると、messageはカラになるようしたい。

rootReducer.js
import { combineReducers } from "redux"
import sessionReducer, { CLEAR_CURRENT_USER_SUCCESS } from './sessionReducer';
import messageReducer from './message_reducer'

const rootReducer = combineReducers({
  sessionReducer,
  messageReducer,
});

export default rootReducer
sessionReducer.js
export const CLEAR_CURRENT_USER_SUCCESS = 'CLEAR_CURRENT_USER_SUCCESS';
const initialState = {
  currentUser: {}
};

const sessionReducer = (state = initialState, action) => {
  switch(action.type) {
    case LOGOUT_SUCCESS: {
      return initialState
    }
    default:
      return initialState
  }
}

sessionReducerをカラにするには、ログアウトのaction経由でreducerを更新すればよい。
が、他のreducer(この場合だとmessageReducer)も初期化更新するのは、
reducerが増えた時に大変なので、reducerのrootレベルで初期化する

対応

root_reducer.js
import { combineReducers } from "redux"
import sessionReducer, { LOGOUT_SUCCESS } from '../sessionReducer';
import messageReducer from './messageReducerr'

// combineReducers箇所をappReducerに変更する(名前はなんでもいい)
const appReducer = combineReducers({
  sessionReducer,
  messageReducer,
});

//ログアウト時、appReducerを更新する
const rootReducer = (state, action) => {
  if (action.type === LOGOUT_SUCCESS) {
    state = undefined
  }
  return appReducer(state, action)
}

export default rootReducer

参考

https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store