React/Reduxで複雑なデータ構造を扱う実践的なアプリケーション開発

アプリケーションで扱うデータ構造を理解する。

• 画面をコンポーネントの組み合わせとして設計する考え方を身につける。

• 関数コンポーネントを実装する。

• Reactのstateを理解する。

• Todo編集用のフォームを実装する。

• propsとkeyを理解する。

• Todoの一覧を表示する。

• 汎用的な独自の入力要素を作成する時の考え方を理解する。

• ラベルのセレクターを実装する。

• 状態に応じた表示制御を理解する。

• 
  

• ReactによるUIの実装をおさらいする。

• styled-componentを使ってコンポーネントにスタイルをあてる。

• reduxの特徴を理解する。

• reduxおよび関連ライブラリをインストールする。

• actionsの実装を理解する。

• reducersの実装を理解する。

• reduxアプリのデバッグを体験する。

• storeを作成できる。

• reduxアプリのデバッグを体験する。

• Reactからreduxのactionsを呼び出す。

• reduxのstoreの情報をReactコンポーネントで描画する。

• 複数のreducersからstoreを生成する。

• ReduxとReactの連携の理解を深める。

• reduxによる状態管理をおさらいする。

以降で利用するモックAPIとその利用方法について紹介します。

参考

•  curl:  https://curl.haxx.se/

redux middlewareの動作と、middlewareのひとつであるredux-thunkについて学びます。

参考

• Middleware - Redux : https://redux.js.org/advanced/middleware
• redux-thunk : https://github.com/reduxjs/redux-thunk

APIを呼び出すためのactionの作成方法を学びます。

redux-thunkの利用方法を学びます。

データを正規化するためのライブラリ normzlir について学びます。

参考

• nomalizr : https://github.com/paularmstrong/normalizr

正規化を行なうための実装方法を学びます。

正規化されたデータをStoreに格納するための実装方法を学びます。

参考

• deepmerge : https://www.npmjs.com/package/deepmerge

正規化されたデータを画面に表示するためのdenormalize処理について学びます。

React/Reduxで役に立つImmutableなデータについて学びます。

参考

• immutable.js : https://facebook.github.io/immutable-js

Immutable.Recordを利用したモデル定義作成を学びます。

準備したモデルを使って、entityをモデルとして格納する方法を学びます。

• 作成したモデルとコンポーネントを連携する実装を学びます。
• モデルにロジックを実装する方法を学びます。