Redux

4046 ワード
redux テキストリンク

なぜReduxを使うのですか?


ステータス値は構成部品に依存しないため、構成部品の外でステータスを管理できます.

Three principles

  • アプリケーションでショップを作成します.
  • 同じデータは常に同じ場所(商店)
    • から来ている.
  • 状態は読取り専用
    • である.
    ステータス
  • は、オブジェクト
  • の動作により変更可能である.
  • の変化を引き起こす関数減速機は、純粋な関数
    • でなければならない.

    Reduxの基本概念1:Action


    :ステータスに変化が必要な場合
  • 動作オブジェクトはtypeフィールド
    • を有する必要がある.
    {
  type: "ORDER",
  drink: {
      menu: "Americano",
      size: "Grande",
      iced: false
    }
}

    Reduxの基本概念2:ActionCreator


    :actionの関数を作成し、パラメータを簡単に受信してactionオブジェクトの形式に変換します.
  • 以降は、素子の動作を容易にするために用いる、通常exportキーワード
    • が用いられる.
    export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

    Reduxの基本概念3:Reducer


    :変化を引き起こす関数で、2つのパラメータを受け入れます.
  • 動作オブジェクトはdispatchに送信、dispatchはreduceを呼び出すことによって新しい状態
    • を作成する.
    ex) 카운터를 위한 리듀서

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

    Reduxの基本概念4:Store


    :storeには、現在のアプリケーションのステータスとReduser、いくつかの組み込み関数があります.

    Reduxの基本概念5:Dispatch


    :store内蔵関数の1つで、動作をトリガします.dispatch関数は動作をパラメータとしてdispatch関数に渡します.

    Reduxの基本概念6:Subscribe


    :store内蔵関数の1つで、パラメータとして関数形式の値を受け入れます.

    Reduxの基本概念の概要



    Reduxのメリット

  • 状態予測可能
  • メンテナンス
  • デバッグ(actionとstate logの記録)
    • に有利
  • のテストが容易
    • bootstrapページングスタイルコード
    [伯俊]堆2116サイコロjava