なぜReact Reduxを使うのですか?

19604 ワード
React テキストリンク

なぜReduxを使うのですか?


リトラクトでアプリケーションを作成する場合、通常はルート構成部品(App.js)でステータスを管理します.例えば、「TodoListプロジェクト」では、状態管理の仕組みは以下の通りである.


リトラクト項目では、親構成部品はほとんどの操作を実行するときに仲介者として機能します.
素子と直接コミュニケーションする方法はありますが、コードの歪みが大量に発生するため、絶対にお勧めしない方法です.(ref를 사용하면 이러한 작업을 할 수 있긴 합니다.)アプリケーションは、入力値、変更されたonChange関数、および新しいプロジェクトを作成するonCreate関数をpropsとしてFormに渡します.Formは関数と値を受信して画面に表示し、変更イベントが発生した場合、親のonChangeを呼び出してアプリケーションの入力値を更新します.
入力値を変更して[追加](Add)ボタンをクリックすると、onCreateが呼び出されてtodos配列が更新されます.
このように、プロジェクトはアプリケーションコンポーネントとレンダー(Render)で必要な値を更新することで開発されます.
この構造は、親コンポーネントによって管理され、劣化しているため、直感的で管理しやすい.しかし、問題はアプリケーションの規模が大きくなったことです.
表示される素子数が増加し,処理されるデータも増加し,データを更新する関数も増加する.これにより、アプリケーションのコードが非常に長くなり、メンテナンスが困難になります.
ルート構成部品がA->E->G構成部品に値を渡す必要がある場合、コードは次のようになります.
// App.js에서 A 렌더링
<A value={5} />

// A.js에서 E 렌더링
<E value={this.props.value} />

// E.js에서 G 렌더링
<G value={this.props.value} />
valueの名前をanotherValueに変更する場合は、上の3つのファイルを開いて変更する必要があります.

ガイドを使用する場合は、構成部品の外でステータス管理を行います。


システムは、ステータス値を構成部品に依存させることなく、構成部品の外でステータスを管理できます.
まず、「リカバリストア」という用語があります.ショップには、プロジェクトのステータスに関するデータが含まれています.
コンポーネント購読ショップ.サブスクリプション中に、一部の関数がショップに転送されます.後で店のステータス値が変化すると、入力された関数が呼び出されます.
例えば、B素子でイベントが発生し、その状態を変更する必要があります.この場合、dispatchという関数で動作をショップに投げつけることができます.アクションは、ステータスが変化したときに参照できるオブジェクトです.アクションオブジェクトにはtypeという値が必要です.
{ type: 'INCREMENT'}
上記のオブジェクトを受信すると、[リカバリポイント](Recovery Point)はアクションを参照します.[あ~](あ~)ステータスに値を付ける必要があります.
また、ステータス値に2を追加する必要がある場合は、これらのアクションオブジェクトが作成されます.
{ type: 'INCREMENT', diff: 2 }
次に、diff値に気づき、既存の値に2を追加します.type以外の値はオプションです.

1.Reduserによる状態変更



アクションオブジェクトを受信すると、入力されたアクションのタイプに応じてステータスを更新する方法を定義する必要があります.これらの更新ロジックを定義する関数をreducerと呼びます.この関数は、後でサンプルコードで実装されます.例えば、入力タイプがINSREMENTの動作であれば、数値を追加し、入力された動作名がDECREMENTであれば、ここでその数値を減らす.
reducer関数は2つのパラメータを受け入れます.
  • 州:現在のステータス
  • 動作:動作対象
    • 次に、この2つのパラメータを参照して、新しいステータスオブジェクトを作成し、返します.

    ステータスが変化した場合は、対象の構成部品を通知します。


    ステータスが変化した場合、以前のコンポーネントサブスクリプションストアで渡された関数リスナーが呼び出されます.これにより、構成部品が新しい状態になり、それに応じて構成部品が再レンダリングされます.

    整理する


    親から子への子のステータスは親から子へのステータスですが、リカバリを使用すると、構成部品構造の外にステータスが配置され、ショップが仲介者としてステータスが更新されたり、新しいステータスが受信されたりします.したがって、コンポーネントの深さにかかわらず、直接の親から取得するように、必要なステータス値を選択することでpropsを簡単に取得できます.

    2.リトラクトを使用しないリトラクト


    冗長性はレスポンスに属するライブラリではありません.もちろん、reactで使うために作られているので、コーディネートにぴったりです.一般的なHTMLやJavascript環境でRidexを使って、Ridexの基本概念を学びましょう.
    簡単なカウンタを実装します.HTMLセクションでは、次のように入力します.
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>just 평범한 리덕스</title>
</head>
<body>
  <h1>평범한 리덕스</h1>
  <h1 id="number">0</h1>
  <button id="increment">+</buttom>
  <button id="decrement">-</buttom>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
</body>
</html>
    これがこのような結果を生んだ.

    JavaScriptを作成しました.
    // DOM 엘리먼트에 대한 레퍼런스를 만들어줍니다.
const elNumber = document.getElementById("number");
const btnIncrement = document.getElementById("increment");
const btnDecrement = document.getElementById("decrement");

// action type을 정의합니다.
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 액션 객체를 만들어주는 액션 생성 함수를 정의합니다.
const increment = (diff) => ({type: INCREMENT, diff: diff});
const decrement = () => ({type: DECREMENT});

// 초기 값을 설정합니다. 상태의 형태는 개발자 마음입니다.
const initialState = {
  number: 0
};

/*
    아래 counter는 리듀서 함수입니다.
    state와 action을 파라미터로 전달받습니다.
    그리고 그에 따라 다음 상태를 정의 한 다음에 반환해줍니다.
*/
const counter = (state = initialState, action) => {
  console.log(action);
  switch(action.type) {
    case INCREMENT:
      return {
        number: state.number + action.diff
      };
    case DECREMENT:
      return {
        number: state.number - 1
      };
    default:
      return state;
  } 
};

// 스토어를 만들 땐 createStore에 리듀서 함수를 넣어서 호출합니다.
const { createStore } = Redux;
const store = createStore(counter);

// 상태가 변경 될 때마다 호출시킬 listener 함수입니다.
const render = () => {
  elNumber.innerText = store.getState().number;
  console.log('내가 실행됨');
}

// 상태가 변경 될 때마다 호출시킬 listener 함수입니다.
store.subscribe(render);
// 초기 렌더링을 위하여 직접 실행시켜줍니다.
render();

// 버튼에 이벤트를 바인딩합니다.
// 스토어에 변화를 일으키라고 할 때에는 dispatch 함수에 액션 객체를 넣어서 호출합니다.
btnIncrement.addEventListener('click', () => {
   store.dispatch(increment(25));
})

btnDecrement.addEventListener('click', () => {
  store.dispatch(decrement());
})
    これで、ボタンをクリックして数値を変更できます.全体的に、リデックスがどのように操作されているかを整理しました.
  • アクションタイプが作成されました.
    • アクション作成関数
  • は、アクションタイプごとに作成される.アクション関数を作成するのは、アクションを作成するたびに{ 이러한 객체 }の形式でオブジェクトを1つずつ作成するので面倒です.特に、動作に複数のパラメータが必要な場合に便利です.
  • の変化を引き起こす関数reducerを定義した.この関数は、各アクションタイプと、アクションが入力されるとどのように変化するかを定義します.この場合、ステータスオブジェクトにはnumberという値が含まれます.変化が発生した場合は不変性を保つ.
  • 店舗がオープンしました.ショップの作成時にcreateStoreを使用して作成します.createStoreにはreducerが含まれています.(ショップの初期状態とミドルウェアをショップに入れることができます.)
  • ストアが変更されるたびに、実行するリスナー関数render,storeが作成されます.subscribeに登録されています.
  • 各ボタンのクリックイベント、store.dispatchを使ってアクションが加わった

    • 参照サイト:https://velopert.com/3480

    TIL 2. position, inline, float
    プログラマー-ベストアルバム