最新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に怒られました。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fb91656aa-6c67-46dc-bdc5-db684d87f82c%2F7bb639fd-254f-435f-bbb8-0e5f95230d65%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588_2022-06-25_22.28.21.png%3Fid%3D7b05e0fd-66ed-4520-ade9-fe9399f58f00%26table%3Dblock%26spaceId%3Db91656aa-6c67-46dc-bdc5-db684d87f82c%26expirationTimestamp%3D1722146400000%26signature%3DhLsfKceNd4x2_uOLjT9t3qntE4GOpf509CdqmdXbYPU?table=block&id=7b05e0fd-66ed-4520-ade9-fe9399f58f00&cache=v2)
そういえばなんかアップデートあったなと思い見ると、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](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fb91656aa-6c67-46dc-bdc5-db684d87f82c%2Fd44de5d5-aef1-49d0-96f4-9aae99c2c608%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588_2022-06-25_22.21.20.png%3Fid%3D3bc74d44-c4b5-4512-9ab7-d9249c84caf0%26table%3Dblock%26spaceId%3Db91656aa-6c67-46dc-bdc5-db684d87f82c%26expirationTimestamp%3D1722146400000%26signature%3DXXQV3xw6VUR6nf69DjPR5ZK3hMJVQ5OYf0k4sH6wPvQ?table=block&id=3bc74d44-c4b5-4512-9ab7-d9249c84caf0&cache=v2)