Redux学習#1

Redux
予測可能なステータス管理ライブラリ
REACTだけでなく、Javascript、Jquery、Vanillaなど違う場所でも利用できます.
なぜReduxが必要なのですか?
グローバルな状態管理を行う場合、道徳は有効です.
構成部品のステータスロジックを各ファイルに分離することで、より効率的に管理できます.
また、構成部品間でステータスを共有する場合、複数の構成部品を必要とせずにステータス値を簡単に渡すことができます.
反応器を使用してプロジェクトを作成すると、コンポーネントにはLocalStateがあり、アプリケーションにはグローバルStateがあります.
反応器を使用してプロジェクトを作成すると、コンポーネントにはLocalStateがあり、アプリケーションにはグローバルStateがあります.
三原則
最初の
アプリケーションのすべてのステータスは、1つのストレージ領域のオブジェクトツリー構造に格納されます.
2番目
ステータスは読み取り専用です.状態を変える唯一の方法は、動作オブジェクトを渡すことです.
3番目
変化は純粋な関数で記述されるべきである.動作状態ツリーがどのように変化するかを指定するには、純粋なモニタを作成する必要があります.
Reduserは,直前の状態と動作を受け入れ,次の状態に戻る純粋な関数である.
古いステータスを変更するのではなく、新しいステータスオブジェクトを作成して返さなければならないことを覚えておいてください.
reducerは、呼び出しをソートしたり、追加のデータを渡したりする関数です.
Action
ステータスを変更する必要がある場合に発生するJavaScriptオブジェクトのフォーマットは次のとおりです.

const ADD_TODO = 'ADD_TODO';

{
    type: ADD_TODO,
    text: 'Build my first Redux App'
}

アクションは、アプリケーションがストアに送信するデータのセットであり、通常のJavaScriptオブジェクトです.
どのタイプのアクションが実行されるかを示すタイププロパティが必要です.store.dispatch()を通じて彼らを送ることができます.
Action Creator
アクション作成関数は、パラメータを受信してアクションオブジェクトとして作成するアクションを作成する関数です.

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

Reducer

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

reducerは変化を引き起こす関数である.reducerは、state、actionの2つのパラメータを受け入れます.
現在の状態と受け取った動作を参考にして,新しい状態を作成して返す.

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});