最新reduxjs（v4.2.0以降） + redux-persistのExample
category
date
Jun 25, 2022
slug
redux-v4-2-0-and-redux-persist
status
Published
summary
最新reduxjs（v4.2.0以降） + redux-persistのExample
type
Post
redux-persistの公式Exampleコードを最新のreduxjsでかくと、VSCodeに怒られました。
そういえばなんかアップデートあったなと思い見ると、redux coreからcreateStoreを呼ぶのがdeprecatedになりましたので、reduxt-toolkitのconfigureStoreで書くわけですが、複数のreducersを指定するときはredux coreのcombineReducersを使いまうす。
// src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./slices/userSlice";
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, userReducer)
const reducers = combineReducers({
playlist: playlistReducer,
user: userReducer,
});
const persistedReducer = persistReducer(persistConfig, reducers);
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: [thunk]
})
export const persistor = persistStore(store)行き遅れ豆知識
4/22のreduxjsのアップデートでなぜcreateStoreがdeprecatedになったかというと、redux-toolkitが推奨アプローチとなったからだそうです。
ドキュメントにも明記されており、should be using Reduxt Toolkit to write that code! とまで書かれています。
あの冗長なReduxのコードは、公式見解としてもはや書くべきでないということです（原理主義者もいるみたいなのでこのへんで）。
🥶
