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;
クールに書けましたね。
参考