reactからredoxを起動(2)

💡 基本設定を先に確認したい人.
reactからRedux第1編を参照してください.
次にreduceとdispatchを正式に使用しましょう.

減速機/配分とは?

const [state, dispatch] = useReducer(reducer, initialArg, init);

useStateの代替関数.(state, action) => newStateの形でreducerが受信され、dispatchの形で現在のstateに戻る.

どうしたんですか。

複数のサブアイテムを含む複雑な静的論理を作成する場合、または次のstateが前のstateに依存する場合、useStateではなくuseReducerが通常選択されます.さらに、useReducerは、コールバックではなくdispatchを伝達することができるため、詳細な更新をトリガする要素の性能を最適化することもできる.
このような小さなプロジェクトでは発光できませんが、非常に大きなサイトでは、1つの場所でデータを管理および処理できます.reduxを作り、state水晶飯法を設置し、そのreducerを確認するだけでOK!

1.減速機の作成

これで、2つのボタンを作成し、+ボタンを押したときに値を増加させ、ボタンをクリックしたときに値を減少させるようにデータを変更します.

let store = createStore(() => {
  return 7;
});

index.jsのこのコードは以下の通りです.

function reducer(state = 0, action) {
  return state;
}

let store = createStore(reducer);

簡単に言えば、reducerという関数をcreateStore()に入れればいいのです.reducerは、stateの初期値とstateのデータを修正する方法を機能に内蔵していると考えると便利です.reducer関数の最初の値はstateであり、取り出して使用することもできる.隣のactionは後で説明します.次に、既存の数値7を0にリセットして、カウント時に表示します.
調べてみると、ここではstate = 0という習慣はお勧めしません.これは初期値がpropsに依存する場合があるので、Hook呼び出しで指定します!詳細は初期状態の指定(正式文書)を参照してください!
📚 私たちがまず学ばなければならないのはよく知っているので、先に言ってください.

2.減速機内部設定

今は内部設定です!
まず内部修正データの論理命名,ex)( action.type === 로직 )その後、if文を介して論理が入力された場合、どのstateが送信されるかを定義することができる.そうでなければ、それらも書けばいいのでは?簡単に増やすために、以下の内容を書きました.

function reducer(state = 0, action) {
  if (action.type === "증가") { // 증가라는 로직이 들어오면
    state++; // state값을 1 증가
  }
  return state; // 변경된 state를 반환
}

これならindexjs設定終わりました!

3.dispatchの使用

既存のページに2つのボタンを追加しましょう.

	<p>{props.counter}</p>
        <div>
          <button>증가</button>
          <button>감소</button>
        </div>

ここではdispatch関数を使用します.この関数を使用して、ユーザーにボタンを押したときに記録された論理メソッドを実行するようにコマンドします.dispatchの中の内容は、type : "로직이름"のように!

<button onClick={() => {
              props.dispatch({ type: "증가" });
            }}
          >
            증가
          </button>

エラーやさまざまな問題が発生したときにデータをチェックして修正する方法を定義しておきました.これは非常に簡単です.
では、正常に機能するかどうか見てみましょう.
つまらないと思って一緒に作って減らしました!

書くときは面倒ですが、このように一つ一つアップロードしていくことは、確かに勉強に役立ちます.私はもっと努力して勉強して、もっと良い文章を書くことができる人になります.ありがとうございます.