ReduxToolkitのインストール手順まとめ

この記事について

• 最近React + ReduxToolkitを使用しての開発案件を行ったのでフレームワーク別に手順を整理
• ReduxToolkitとは？的な話は割愛(魅力を語る記事は検索するとたくさん出てくるので)

create-react-appを使用する場合

新規プロジェクト作成と同時にインストールする場合

それぞれ指定したtemplateはデフォルトでReduxToolkitがインストールされます

• JavaScriptの場合

  create-react-app {プロジェクト名} --template redux
  

• TypeScriptの場合

  create-react-app {プロジェクト名} --template redux-typescript
  

既存プロジェクトへ追加する場合

redux本体はReduxToolkit(@reduxjs/toolkit)に含まれているので、明示的に指定してインストールは不要です

• JavaScriptの場合

  yarn add @reduxjs/toolkit react-redux
  

• TypeScriptの場合

  yarn add @reduxjs/toolkit react-redux
  yarn add -D @types/react-redux
  

create-next-app(Next.js)を使用する場合

新規プロジェクト作成と同時にインストールする場合

公式githubに色んなテンプレートがあるのでそれを指定

• JavaScriptの場合

  create-next-app --example with-redux-toolkit {プロジェクト名}
  

• TypeScriptの場合

  create-react-appの時みたいにReduxToolkit + Typescriptの都合の良いテンプレートはなさそうなので、何かと設定に手間がかかりそうなTypeScriptのテンプレートを指定してプロジェクト作成して後から個別でReduxToolkitをインストールします。

  create-next-app --example with-typescript {プロジェクト名}
  

既存プロジェクトへ追加する場合

create-react-appの所に書いた方法と同じ

今回使用したNext.jsのテンプレート

• https://github.com/vercel/next.js/tree/master/examples/with-redux-toolkit
• https://github.com/vercel/next.js/tree/master/examples/with-typescript