2019.03.06

Reduxで特定のactionに応じてstoreをリセットする

Home / Tech

Reduxを使って開発していると、特定のactionに応じてstoreをリセットしたい時があります。

ユーザーがログアウトした時など。

以下のようにrootReducerにひと処理かませてやるとできます。

読み込んだReducerをcombineReducersしたものをappReducerとします。

import { combineReducers } from "redux";

import hogeReducer from "./reducers/hoge";
import fooReducer from "./reducers/foo";

const appReducer = combineReducers({
  hoge: hogeReducer,
  fooPosts: fooReducer
});

新たにrootReducerにてactionをかませます。
action.type === "SUCCESS_SIGN_OUT"のとき、 state = undefinedとします。

import { combineReducers } from "redux";
import thunk from "redux-thunk";

import hogeReducer from "./reducers/hoge";
import fooReducer from "./reducers/foo";

const appReducer = combineReducers({
  hoge: hogeReducer,
  fooPosts: fooReducer
});

const rootReducer = (state, action) => {
  if (action.type === "SUCCESS_SIGN_OUT") {
    state = undefined;
  }

  return appReducer(state, action);
};

では何故undefinedとするのでしょうか。

Reduxではactionに関わらず、undefinedが呼ばれるとinitialStateを返すためです。
これを利用してこのように書きます。

以上を用いて、ミドルウェアなどを含めてcreateStoreをする設定ファイルを書くとこうなります。

// configureStore.js

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import hogeReducer from "./reducers/hoge";
import fooReducer from "./reducers/foo";

const appReducer = combineReducers({
  hoge: hogeReducer,
  fooPosts: fooReducer
});

const rootReducer = (state, action) => {
  if (action.type === "SUCCESS_SIGN_OUT") {
    state = undefined;
  }

  return appReducer(state, action);
};

const configureStore = () => {
  return createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
};

export default configureStore;

クールに書けましたね。

参考

javascript - How to reset the state of a Redux store? - Stack Overflow

undefined