Django+Reactで学ぶプログラミング基礎(4): 開発環境構築(Redux)

[前回] Django+Reactで学ぶプログラミング基礎(3): 開発環境構築(React)

はじめに

前回に続き、開発環境の作成です。
今回は、Redux開発環境です。

開発環境情報(Windows)

• 前回までインストール済み
  • Python 3.10
  • VS Code(Visual Studio Code) 1.67
  • Django 4.0
  • React関連
• 今回は、Redux開発に必要なもの

Reduxとは

• アプリの状態を予測可能なコンテナ
  • シンプルで限定的なAPIを備えた小さなライブラリ
• Reduxはなぜ必要か
  • SPA(シングルページアプリケーション)が複雑になり、state(状態)管理が煩雑に
    • バグが目立つように
  • Reactは、この問題を解決するため、Viewレイヤーから非同期と直接なDOM操作を取り除いた
    • その結果、state(状態)管理は開発者に委ねられた
    • 解決策としてReduxが採用されるように
• Reduxのデータフロー
  
  ※ 引用元: https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow
  • State: アプリの状態を保持する唯一の手段
    • 特定時点でのアプリの状態を表す
  • View: 現在の状態に基づく、UIの宣言型説明
    • UIは状態に基づいてレンダリングされる
  • Actions: ユーザー入力による、アプリ発生イベントおよび状態更新トリガー
    • ユーザーがボタンをクリックすると
      • 発生内容に基づき状態が更新される
      • UIは新しい状態に基づいて再レンダリングされる

Redux開発環境の構築

Redux Toolkit(RTK)をインストール

• Reduxロジックを作成するため、公式に推奨されるアプローチ
• Reduxコアをラッピングし、Reduxアプリ構築に必要なパッケージと関数が含まれる
• 推奨されるベストプラクティスが組み込まれている
  • Reduxタスクを簡素化
  • イージーミスを防ぐ
  • Reduxアプリケーションの作成を容易に
• Redux Toolkitを、npmパッケージとしてインストール

>npm install @reduxjs/toolkit

Reduxコアをインストール

• Reduxコアライブラリを、npmパッケージとしてインストール

>npm install redux

React Redux アプリを作成

• 公式Redux+JSテンプレートを使用
  • メリット
    • Reactコンポーネントで、Redux ToolkitとReact Reduxを統合可能

C:\kanban>npx create-react-app my-react-redux-app --template redux

• 起動すると、ブラウザにサンプルアプリが表示されます

C:\kanban>cd my-react-redux-app
C:\kanban\my-react-redux-app>npm start
You can now view my-react-redux-app in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://172.28.128.1:3000       
... ...
webpack compiled successfully

おわりに

Windows環境にRedux関連をインストールし、
React Reduxアプリのサンプルを見てみました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(5): Djangoチュートリアル(投票アプリその1)