自作Reduxチートシート

はじめに

Reduxがわかりづらいので、自分用のカンニングペーパーを作りました。

※全般はこちらでまとめています。

Reactを学んでみた

Reduxチートシート

✅Reduxチートシート

状態特化のライブラリ。値の保管は全てStoreで行う。Fluxに基づいて設計。Action→Dispatcher→Store→Viewの一方向。

index.js(親コンポーネント)

state→reducer→store→providerの順に記載されるケースが多い。

・state:ストアの中で保管される。状態を表し、変更に応じて自動で表示も変更される。

let ステート名 = {
  プロパティ名: 値,
};

・reducer:storeに保管されるstateを変更する。呼び出した処理は常に新しいstateをリターン。

function レデューサー名 ( state = ステート名, action) {
  switch (action.type) {
    case 'タイプ名':
    return {~~処理~~};
    default:
    return state; // 引数で渡されたstateをそのままreturn
  }
}

※action.typeはreducerやmiddleware(非同期はReduxにないので別ライブラリ使う)がどの処理を行うか判断(条件分岐)するために使う。

・store:データを保管し管理。保管される値はstateと呼ぶ。

let ストア名 = createStore( レデューサー名 );

・provider:storeを他のコンポーネントに受け渡す。※子コンポーネント側でconnectを使わないと値は取得されない。

<Provider store={ストア名}>
  <コンポーネント名 />
</Provider>,

App.js(子コンポーネント)

・connect:コンポーネントにストアを接続するための関数。
※dispatch(要求)でレデューサーを呼び出し、値を操作する。

変数 = connect ( 設定 ) ( コンポーネント );

※mappingStateなどと命名された関数(不要なステートを消し、コンポーネントに必要なものだけを返す関数。)を設定に入れるのが通例。

・action:実行する内容に関する情報をまとめたオブジェクト。dispatchの引数に用意してreduxのフローを実行する。
※typeはマスト。それに必要な引数(=payload※データ部分)が入る。

メソッド() {
  if () {
    this.props.dispatch({type: 'タイプ名'});
  } else {
    this.props.dispatch({type: 'タイプ名'});
  }
}

完成

おわりに

これを印刷、片目で見ながらアプリ制作していきます。

コメントを残す