redixの使用

reduceはステータス管理ライブラリです.
反応状態から状態を管理すると、素子間の状態移動が複雑になり、困難になる.
この問題を解決するためにステータス管理ライブラリが表示されます.
つまり,State移動が発生するほどReduxが輝く.
では、RidexでStateを管理する方法について説明します.

store

まず,反応の状態をすべて収集する概念を用いた.
この集まった銀行はstoreと呼ばれています.
もちろん、storeには管理したい状態が含まれています.

reducer

店には管理したい州が集まっている.
リアクターは、usStateを使用して状態を変更する関数を使用して状態を変更します.
つまり、stateを直接変えさせない.
reduceもstore内でstateを直接変更することはできません.
反応器のように状態を変える関数を提供できますか?
直接体現しなければならない.この球を減速機と呼ぶ.
すなわち,reduceはstoreコンテンツを変更する実装体である.

ストレージの作成

それでは早速storeを作りましょう

const store = createStore(reducer, initialState);

上記のようにcreateStoreを使用してstoreを作成します.
因子は以下に説明する
reduceルールでは、storeは1つだけ作成する必要があります.
まだ深く書いていないので、なぜか分かりません.管理が難しいかもしれません
1つのstoreのみを使用すると、すべてのステータス管理要素が集約されます.
またstoreは動的生成の概念ではない.
ルータのようにアプリケーションの初期実行時にstoreを事前に適用する必要があります.

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root'),
);

上記のように、レンダリング時にProviderでラップします.
この意味はstoreに格納されているstateを予め定義する必要がある.
ショップを作成するときに2番目のパラメータとして入るInitialStateです.
名前は重要ではありません.管理するstateの初期値の集合です.
以下のとおりです.

const initialState = {
  compA: 'a',
  compB: 12,
  compC: null,
};

論理的に考えてみましょう
stateは定義済みです.もちろんstateのapiを変更するにも事前定義が必要です.
これが最初のパラメータに加えられたreduceです.stateはオブジェクトであり、reduceも関数です.
HooksのuseStateではなく、クラスのsetStateです.
では、setStateのようにcomaだけを交換したいなら、comb、comcも交換しますか?
そうだ.comaだけを変えたいとしても,初期状態と同じオブジェクト形態を保つ.
航続員はレンタカーの価格でstoreの価格を変えることを約束した.
では、李杜瑟は次のような形しかできません.

const reducer = (prevState, action) => { // 새로운 state 만들어주기
  switch (action.type) {
    case 'CHANGE_COMP_A':
      return {
        ...prevState,
        compA: action.data,
      };
    case 'CHANGE_COMP_B':
      return {
        ...prevState,
        compB: action.data,
      };
    case 'CHANGE_COMP_C':
      return {
        ...prevState,
        compC: action.data,
      };
    default:
      return prevState;
  }
};

トカゲは上記のヘルメットで作らなければなりません.prevStateは、既存のストレージのステータスの値です.
Actionは変更したい値です.
Actionはオブジェクト形式で存在し、通常type、dataからなる.
このようにしなければならないのは、変更したい値だけを変更する論理を1つの関数から分離して実施しなければならないので、そうするしかない...
switch文を使用してtypeに基づいて変更するデータと残りのステータスを構造分解割当てに分解します.
どう言っても無知な方法だ.要するに、storeが作成され、storeを変更するためのreduceも作成されました.
次に、storeのstateをcomponentから取得し、変更してみましょう.
まずstoreのcompaを持ってきてください

const comA = useSelector((state) => state.comA);

簡単です.ホークスでそのまま持って来ればいいです.classはちょっと複雑です.フックを直接使いましょう
userSelectorはreact-redoxモジュールが提供するhooks用のAPIである.
userSelectorを使用すると、storeから値を簡単に減算できます.
もうすぐ着きます.今はcomaを変えるだけです.
まずはソースから見るとこんな感じ

const dispatch = useDispatch();
dispatch({ // action
  type: 'CHANGE_COMP_A',
	data: 'b'
});

上記の説明のようにreduceを呼ぶべきです.
上に説明したように、私たちが実現したreduceは直接呼び出さず、dispatch関数です.
私の代わりにreduceを呼んでください.reduceのパラメータを覚えていますか?
reduceのパラメータはprestateとactionです.それは私たちが決めたのではなく、事前に約束したのです.
reduceを直接呼び出す場合は、prevStateのロードを続行する必要があります.
また、便宜上、reduce呼び出しの代わりにdispatchというrapping関数を呼び出すこともできます.
我々はactionと呼ぶ,すなわち減速機に対してタイプと変更を行うデータである.
しかしその動作は一般的にそのまま対象に入れるのではなく、一般的な関数として作られる.
これをaction Creatorといいます

const comAAction = (data) => {
  return { // action
    type: 'CHANGE_COMP_A',
		data: data
  };
};
const dispatch = useDispatch();
dispatch(comAaction('b'));

それを動作関数にすると、データが長くなってもソースコードがきれいになります(実際には感じませんが...)
最終的に下図のような構造になる.

結局他のブログでは、まず用語から~説明してから説明しました.
そうするしかないようです.しかし、今では用語を見るともっと難しいと思います.

コアサマリー

action createでactionを作成しdispatchに挿入
あ、またこのように要約すると、もっと難しいです.ほほほ(dispatch(comAction(「b」)

dispatchはreduceを呼び出します

reduceはactionのタイプに従って新しい状態を返します

storeが新しい状態に更新されました

値取得にはuserSelector~(どうせ反応器で使うんでしょ?)