Top header xs

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

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;



クールに書けましたね。

参考

About Me

Profile image

hirozak

エンジニア

音楽, 映画, 海外ドラマ, ガジェット, インテリア, お酒が好きです。

詳しく見る

This Blog

このブログはhirozakがRuby on Railsで開発しました。

GitHubにて、ソースコードを公開しています。