🌟
React Reduxの構成がモダンかどうかの簡易チェックリスト
reactの状態管理ツールReduxを使う場合にredux-toolkitが使われる様になって数年が経過したのでありますが、Reactがhooksを使った書き方になったのと同様に、Redux周りのコードの書き方も頻繁に進化してきたのであります。
今(2023/12/20現在)公式が推奨する構成は、こちら。
Redux ToolkitのconfigureStore + createSlice + React-ReduxのhooksAPI
モダンなReduxの書き方については、公式のMigrating to Modern Reduxが一番簡潔に説明されているのでありますが、これだけ頻繁に書き方が変わると脈絡と受け継がれたReduxのコードでは、Redux toolkitがそもそも導入されていなかったり、あるいは導入をしていてるが昔の書き方が残っていても気づかない場合があるんですなー。
そういう訳で、公式のMigrating to Modern Reduxを参考に簡単なチェックリストを用意しました。
Reduxがモダンかどうかの簡易チェックリスト
-
createStoreではなく、configureStoreを用いてstore設定を最適化している -
createSliceを用いて、reducerとactionの作成を簡略化している -
createApiあるいはcreateAsyncThunkを用いてデータの取得を行っている -
かつてよく使われていたReact-Reduxの
connectAPIやReduxのbindActionCreatorsAPIを利用していない -
かつてよく使われていた
mapStateToPropsやmapDispatchToPropsを利用していない -
useSelectorやuseDispatchを利用している -
Redux Toolkitの型推論機能を利用して、手動での型宣言を減らしている
例えば、以下の様なコードになっているか
app/store.ts
...
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
...
src/app/hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
全部にチェックが入れば、モダンと言えるんじゃないでしょうか。
いかがでしょうか、意図してそうなっていれば問題ないかもしれませんが、出来るだけ最新のやり方に合わせて、メンテナンスコストを下げていきたいところですね。
手元でコードで動きを確認したい場合は、公式が新しいReact, Redux Toolkitのアプリを作る際の推奨のテンプレートを公開しているのでこちらを使うとよろしいんじゃないでしょうか。
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
Discussion