📕 おもしろいRedux(0)

16093 ワード
frontend テキストリンク
実は、李徳思は面白くない.しかもまだ難しいです.リデスの欠点には高い走行曲線があり、私だけではないようだ.
しかし、道徳がない場合、状態管理はもっと面白くなく、時には怒ることもある.
そこで、フロントエンドのキーの1つであるステータス管理をよりよく行うために、reduceを学びましょう.

Redux?


フェイスブック(玄梅塔)は、自分の固有の問題を修復するための新しいモデルFluxを発表した.
そして,Fluxと所与の状態を変える方法reduceの概念を組み合わせてReduxツールが出現した.
Reduxの動作は大きく4つの要素のコラボレーションとして理解できる.
  • Action creator
  • Dispatcher
  • Store
  • Rendering function
    • 動作に従ってDispatcherを呼び出し、Reduserでstateを操作します.次に、任意のレンダリング関数を定義し、ショップが関数を購読すると呼び出されます.

    🔨 実習

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./counter.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <span class="number">0</span>
    <button class="plus">+</button>
    <button class="minus">-</button>
    <button class="unsubscribe">Unsubscribe</button>
  </body>
</html>
    ボタンを押すと数字が変わるカウンタを作ります.Storeの状態に応じて値を変更し、Unsubscribeボタンを押して購読をキャンセルします.
    import { createStore } from "redux";

const PLUS = "PLUS";
const MINUS = "MINUS";

const plus = () => ({ type: PLUS });
const minus = () => ({ type: MINUS });

const initialState = 0;

function counterReducer(state = initialState, action) {
  console.log(action);

  switch (action.type) {
    case PLUS:
      return state + 1;
    case MINUS:
      return state - 1;
    default:
      return state;
  }
}

const store = createStore(counterReducer);
    PLUSとMINUSを持つ動作生成関数をtypeでそれぞれ宣言した.次に、数値の初期値InitialStateを作成し、動作に応じてStateのreduceを変更します.
    storeは、reduceパケットが提供する機能によってdispatcherを呼び出すことができる.
    function init() {
  const number = document.querySelector(".number");
  const plusBtn = document.querySelector(".plus");
  const minusBtn = document.querySelector(".minus");
  const unsubscribeBtn = document.querySelector(".unsubscribe");

  const render = () => {
    const state = store.getState();

    number.innerText = state;
  };

  const unsubscribe = store.subscribe(render);
  
  plusBtn.addEventListener("click", () => store.dispatch(plus()));
  minusBtn.addEventListener("click", () => store.dispatch(minus()));
  unsubscribeBtn.addEventListener("click", () => unsubscribe());
}

init();
    ボタンにイベントリスナーを登録し、storeにrender関数を購読させます.storeはステータス変更時にrender関数を呼び出します.
    また、subscribe関数の実行結果により、unsubscribe関数が返され、サブスクリプションをキャンセルできます.

    😪 ポスト


    理徳キット内部のmoduleinportは複雑なので、パッケージを使って作業しています.
    簡単なカウンタを作るために、Ridexの一部の機能しか使われておらず、コード量がかなりあります.
    Ridex開発者のDanabromoveはYou might not need reduxの文章を発表した.ツールを導入する前に、アプリケーションの規模や機能に応じて適切に選択したほうがいいです.
    JAva言語プロセス通信学習
    [個人学習]ジャワの定式