【無料で読める】ReactでReduxを使ってみよう

[概要] Reactでのアプリケーション開発に慣れてくると、少し規模の大きいアプリケーションを作りたいと思うようになると思います。

アプリケーションを作る際には他の人が作成したコードを見て学習することも多いと思いますが、ReactのコードはReactの公式サイト、GitHub、ブログなどネット上の様々な場所で公開されていますので、少しネットを探せば参考になるようなコードも見つかると思います。

ただ、少し規模の大きいReactアプリケーションではReduxが使用されている場合も結構多いですので、Reactの開発経験はあるけれどReduxは使ったことがないという人にとっては、参考になりそうなコードが見つかってもReduxを使っている箇所があるために十分にコードの内容を理解できない、ということもあるかと思います。

また、作りたいアプリケーション自体が多数のコンポーネントで構成されており、複数のコンポーネント間で状態を共有する必要があるといった場合は、Reactだけで実装するのは大変で、Reduxのような状態を一元管理できる仕組みがないととてもじゃないけど作れない、いうこともあるかと思います。

以上のことからReactで少し規模の大きいアプリケーションを作る場合にはReduxの理解が必要となります。

ReduxはAction、Reducer、StoreなどのReduxの仕組みを理解する必要があったり、ミュータブルとイミュータブル、非純粋関数と純粋関数の違いを理解する必要があったり、といろいろと学習することがありますが、少しずつ理解していけば良いと思います。

[想定する読者] Reactでのアプリケーションの開発経験のある方で、状態管理ライブラリを必要とするような少し規模の大きいアプリを開発しようと考えられている方を想定しています。

本書ではサーバーとHTTP通信を行うようなアプリも作成しますので、PostmanやFetch APIの基本的な理解も必要になります。

[本書の構成] Chapter 1ではReduxを使う上で必要となる基礎知識を整理します。

Chapter 2では簡単なReduxのコードをNode.js環境で動かしてみます。

Chapter 3ではChapter 2で紹介したReduxのコードをReactのアプリから動かしてみます。

Chapter 4ではRedux Thunkというミドルウェアを使って簡単な非同期処理を行うアプリを動かしてみます。

Chapter 5ではReduxの実践としてReduxを使わずに作成されたアプリをReduxを使う形に変更してみます。

[実行環境] Windows 10上でアプリケーションの作成や実行を行っています。

コマンドの実行はコマンドプロンプト上で行っています。

アプリケーションはChromeブラウザ上で動かしています。

■使用しているソフトウェアのバージョン
create-react-app 2.1.5
react 16.8.3
react-router-dom 4.3.1
redux 4.0.1
react-redux 6.0.1
redux-thunk 2.3.0
connected-react-router 6.3.1

[目次] はじめに
想定する読者
本書の構成
開発環境
事前準備
Chapter1 Reduxの基礎知識
1-1 Reduxとは
1-1-1 状態管理ライブラリはどのような場合に必要？
1-1-2 状態管理ライブラリを使用したアプリの例
1-2 Reduxで登場する用語
1-3 Reduxの３原則
1-3-1 第１原則（Single source of truth）
1-3-2 第２原則（State is read-only）
1-3-3 第３原則（Changes are made with pure functions）
1-4 Pure Function（純粋関数）とは
1-4-1 ミュータブルとイミュータブル
1-4-2 非純粋関数と純粋関数
補足情報 Pythonでのミュータブルとイミュータブル
Chapter2 Node.js環境でReduxを実行
2-1 Reduxの基本コード例
2-2 Reduxを動かすための準備
2-3 Reduxで数値を変更
2-4 Reduxでオブジェクトを変更
2-5 Reduxで配列を変更
補足情報 dispatchの戻り値
Chapter3 React環境でReduxを実行
3-1 React Reduxの概要
3-2 React+Reduxで数値を変更
補足情報 mapDispatchToPropsの表記方法
3-3 React+Reduxでオブジェクトを変更
3-4 React+Reduxで配列を変更
3-5 Redux DevToolsの使用方法
Chapter4 Reduxでの非同期処理
4-1 Redux Thunkの概要
4-2 カウンターアプリで非同期処理を実行
Chapter5 Reduxの実践
5-1 階層構造を持つアプリのRedux化
5-1-1 階層構造を持つアプリのサンプルコード
5-1-2 Reduxを使って書き換えたコード
5-2 HTTP通信を行うアプリのRedux化
5-2-1 HTTP通信を行うアプリのサンプルコード
5-2-2 Reduxを使って書き換えたコード
5-3 JWTを利用した認証を行うアプリのRedux化
5-3-1 JWTの概要
5-3-2 JWTの作成と検証の方法
5-3-3 サーバーアプリの準備
5-3-4 Postmanによる動作確認
5-3-5 HTML+JavaScript+Fetch APIによる動作確認
5-3-6 JWTを利用した認証を行うアプリのサンプルコード
5-3-7 Reduxを使って書き換えたコード
補足情報 JWTの保存場所について
おわりに

• ReactでCRUD操作を行ってみよう