【Redux】ストアの状態をリセットする

会員サイトでログアウトした場合などに、Reduxのstoreをリセットしたい。
リセットしないと、そのまま違うアカウントでログインしたときにいろいろ困る。

reducer単位でクリアするパターン

store.js

import { createStore, combineReducers } from "redux";

import a from "./reducers/a";
import b from "./reducers/b";

const rootReducer = combineReducers({
    a,
    b
});

export default createStore(rootreducer);

reducer/a.js

export const registerName = name => {
	return {
		type: "INSERT_NAME",
		name: name
	}
}

export const registerAge = age => {
	return {
		type: "INSERT_AGE",
		age: age
	}
}

// ここにクリアアクションを追加
export const clearState = () => {
	return {
		type: "CLEAR_STATE"
	}
}

const initialState = { name: "", age: ""}

export default reducer(state = initialState, action) {

	switch(action.type) {
		case "INSERT_NAME": 
			return {
				...state,
				name: action.name
			}
		case "INSERT_AGE": 
			return {
				...state,
				age: action.age
			}
		case "CLEAR_STATE": 
			return initialState
		default:
			return state
	}
}

reducer/b.jsでも同じことをする

stackoverflowにあったイケてるやつを参考にしたパターン

参考：stackoverflow

store.js

import { createStore, combineReducers } from "redux";

import a from "./reducers/a";
import b from "./reducers/b";

const appReducer = combineReducers({
    a,
    b
});

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

export default createStore(rootreducer);

素晴らしいね！！