最新reduxjs(v4.2.0以降) + redux-persistのExample

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に怒られました。
notion image
 
そういえばなんかアップデートあったなと思い見ると、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のコードは、公式見解としてもはや書くべきでないということです(原理主義者もいるみたいなのでこのへんで)。
 
🥶
notion image

© わくてか 2022