Django+Reactで学ぶプログラミング基礎(28): Reduxチュートリアル(準備と概要)

[前回] Django+Reactで学ぶプログラミング基礎(27): Reactチュートリアル(タイムトラベル実装とチュートリアルまとめ)

はじめに

前回まで、Reactの基本を勉強しました。
今回から、Reduxの勉強をスタートします。
教材は、Redux公式チュートリアルを使用します。

今回の内容

• チュートリアルの概要と準備
• Reduxの概要
  • Reduxとは、なぜ必要か

チュートリアルの内容と準備

• チュートリアルの内容

  • Reduxのコアコンセプトと原則
  • Reduxアプリの構成要素
  • Reduxのデータの流れ
  • Reduxアプリ構築の標準パターン

• チュートリアルの構成

  • パート1
    • Reduxアプリのミニマムサンプル
  • パート2
    • Reduxの概念とデータフロー
  • パート3
    • State、Action、Reducerの概念
    • サンプルアプリを作成し、Reduxの機能を理解
    • Reduxの標準パターンと抽象化

• チュートリアルの進め方

  • まず、Reduxの標準パターンで、ゼロからアプリコードを書いてみる
    • Reduxアプリの基本概念と構成要素を理解
  • つぎ、Redux Toolkitを使用し、Reduxアプリを作成
    • Redux Toolkitは、本番アプリを構築するため推奨される方法
    • Modern Reduxでは、標準パターンを最新パターンに変換する方法を勉強

• チュートリアルの前提知識

  • HTMLとCSS
  • ES6の構文と機能
  • 配列
  • スプレッド演算子
    • 反復可能なオブジェクト(配列など)の内部にアクセスし、オブジェクトの複製/マージを行う

  const foo = ['one', 'two', 'three'];
  const bar = [...foo]; // "..."がスプレッド演算子
  console.log(bar);
  // ['one', 'two', 'three'];
  

  • Reactの知識
    • JSX
    • State
    • 関数コンポーネント
    • Toolkit
    • フック(Hook)
      • stateなどReactの機能を、クラスを書かずに使用可能に
  • 非同期JavaScriptとAjaxリクエストの作成
    • Ajaxは、Webブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法
      • XMLHttpRequestによる非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチ

• ブラウザにReactおよびReduxDevTools拡張機能をインストール

  • React DevTools拡張機能
  • Redux DevTools拡張機能
  • ※ ブラウザはBraveを使用しています(Braveの検証ブログ)

Reduxとは、なぜ必要か

• Reduxとは

  • アクションと呼ばれるイベントを使用し、アプリ状態を管理および更新するためのパターン/ライブラリ
  • アプリ全体で使用する状態の集中ストアとして機能

• なぜReduxを使用する必要があるか

  • Reduxは、グローバル状態の管理に役立つ
  • Reduxが提供するパターンとツールを使用し、以下を簡単に理解できる
    • アプリの状態がいつ、どこで、なぜ、どのように更新されているか
    • それらの変更が発生したときに、アプリロジックがどのように動作するか
  • Reduxは、予測/テスト可能なコーディングを支援し、アプリケーションの正常機能を担保

• いつReduxを使うべきか

  • 中/大規模のアプリで、状態管理のロジックが複雑になる場合
    • 大量の共有状態管理が必要で
    • アプリ状態が時間の経過とともに頻繁に更新される場合

Reduxのライブラリとツール

• Redux自体は小さな独立したJavaScriptライブラリ

  • 通常、以下のようなパッケージにより使用される

• React-Redux

  • ReactコンポーネントがReduxストアと対話できるようにする、公式パッケージ
  • Reduxは任意のUIフレームワークと統合でき、Reactで最も頻繁に使用される
  • React-Reduxは、状態の一部を読み取り、アクションをディスパッチし、ストアを更新

• Redux Toolkit

  • Reduxロジックを作成するための推奨アプローチ
  • Reduxアプリの構築に不可欠なパッケージと関数が含まれている
  • 推奨されるベストプラクティスに基づいて構築されている
    • Reduxアプリ作成におけるReduxタスクを簡素化
    • よくある間違いを防ぐ

• Redux DevTools Extension

  • 時間の経過に伴うReduxストア状態の変化履歴を表示
  • タイムトラベルデバッグなど強力な手法を提供
    • アプリを効果的にデバッグできる

おわりに

Reduxの勉強をスタートしました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(29): Reduxチュートリアル(構成要素とデータフローの概要)