Reduxを用いたフロントエンド開発に役立つ知識まとめ

React

ビューの制御をcomponentという単位で行うフロントエンドのjsライブラリ。

  • State ··· component内で定義される状態のこと。変更可能。
  • Props ··· 親componentから渡されるパラメータ。自分のcomponent内から変更しない。親のメゾットを使って変更する。
  • Component ··· ビューの単位。classみたいな感じで書かれる。親から受け取ったpropsと自分の中で定義したstateを持つ。render関数でビューの内容をjsxで返す。
  • Screenshot ··· 実際に表示される内容が出る。tsをコンパイルしたjs。
  • Import ··· index.tsの中にexportが無いディレクトリはimport出来ない。

React-native

Reactを使ってiOS, Android両方のアプリが開発できるフレームワーク。nativeは母国語みたいな意味で、swift,javaがわからなくてもreactから翻訳してくれる。実際にプログラムを組む部分はsrcディレクトリ以下のtypescriptファイル。

  • yarn start ··· 起動
  • yarn storybook ··· ストーリーブックを使って確認できる

Redux

Reactのstateを管理しやすくするための構造のこと。いろんなところでstateを定義していたら訳がわからなくなるので、stateを一箇所(store)で管理する。各componentは親componentのpropsを扱う機能しか持たない。storeを直接継承するcomponentはcontainerと呼ばれる。

  • Store ··· アプリケーション内で一つだけ存在する状態を管理するためのオブジェクト。
  • Action ··· 識別のためのタイプと任意のデータを持つオブジェクト。storeの変更指示に使われる。
  • ActionCreators ··· viewから受け取った情報を元にActionをReducerに渡す役割。APIへの問い合わせなどもここで行う。
  • Reducer ··· 受け取ったActionの内容に従って、実際にStoreの変更を管理する。stateとactionを元にstateを返す。
  • Getstore ··· Storeの状態を取得するメゾッド。
  • Dispatch ··· Storeの状態を更新するためのメゾッド。

Redux-Observable

Rxjsを使ってreduxの非同期処理を行うミドルウェア

  • Epic  アクションのストリームを監視してアクションが流れてきたときに別のアクションを発生させる機能。

Typescript

Jsを簡単にかける言語。コンパイルするとjsになる。tsc -w でコンパイル

  • Interfece ··· オブジェクトの型を指定する。