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のコードは、公式見解としてもはや書くべきでないということです（原理主義者もいるみたいなのでこのへんで）。

Why Redux Toolkit is How To Use Redux Today | Redux

🥶