Ridexの基礎の定理

冗長性とは、Fluxモードをベースとして、応答の中でよりシステム的な状態管理のために作成されたライブラリです.
主なコンポーネントは次のとおりです.

1.ショップ

現在のstateとreduceを含むオブジェクトは、1つのアプリケーションに1つしかありません.最上位コンポーネントをプロバイダにカプセル化し、リポジトリに渡すと、コンポーネントはステータス値または割り当てアクションを参照できます.

const store = createStore(reducer);
<Provider store={store}>
  <App />
</Provider>

2.動作

2-1. アクションの種類

const INCREASE = 'counter/increase';

アクションタイプを定義します.

2-2. アクション作成関数

const increase = () => ({ type: INCREASE });

アクションオブジェクトの関数を作成します.

2-3. さいせいき

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREASE:
      return { number: state.number + 1 }
  }
};

特定のアクションが発生したときに、各アクションが実行するアクションを定義します.
現在のstateと発生したactionをパラメータとして受け入れ、新しいstateを返します.
reducerは純粋な関数でなければなりません.他の値に依存せずにstateの不変性を維持する必要があります.

*redux-actions

アクション作成関数とリダイレクトのライブラリをより簡単に作成できます.

const insert = createAction(INSERT, text => ({ id: id++, text }));
const reducer = handleActions({
    [INSERT]: (state, action) => ({
      ...state,
      todos: state.todos.concat(action.payload)
    })
  },
  initialState
);

createAction関数は、アクションタイプと「アクション作成関数に渡されるパラメータのマッピング」をパラメータとして受け入れます.戻り値は、アクション生成関数です.
handleActionsは、動作タイプを中心にReduserを定義する関数です.アクション作成関数に渡されるパラメータは、更新関数ごとにactionがあります.ペイロードクエリを使用できます.

const rootReducer = combineReducers({ counter, todos, ... });
export default rootReducer;

1つのアプリケーションに複数のreducerがある場合は、rootreduceにマージする必要があります.

3.構成部品

Ridexを使用してアプリケーションを作成する場合は、コンポーネントを2つに分類できます.

3-1. コンテナ構成部品

リカバリストアに直接接続された構成部品.ショップからステータスまたは割り当て操作を参照する関数を定義し、プレゼンテーションコンポーネントに渡すことができます.

// connect 이용
const CounterContainer = (number, increase) => {
  <Counter number={number} onIncrease={increase} />
};
export default connect(
  state => ({ number: state.number }),
  dispatch => ({ increase: () => dispatch(increase()) })
)(CounterCountainer)

最初はreact-redoxのconnect構文を利用して店を接続する方法を学びました.
connectは「storeとdispatchをそれぞれコンテナに渡すprops(マッピング)を定義する関数」を引数として受け入れ、値を関数として返します.
戻り関数にコンテナ構成部品を引数として入れると、そのコンテナ構成部品はショップに接続されます.

export default connect(
  state => ({ number: state.number }),
  {
    increase,
  }
)(CounterCountainer)

connectの2番目のパラメータとして、関数ではなく動作生成関数からなるオブジェクトを渡すことができます.(代わりに、アクション作成関数の名前はコンテナ構成部品の引数名と同じでなければなりません)
動作生成関数を受け入れ,それを派遣する関数に変換するものと見なすこともできる.
connect構文ではなく、コンテナコンポーネント内でhooksを使用することもできます.

// hooks 이용
const CounterContainer = () => {
  const number = useSelector(state => state.number);
  const dispatch = useDispatch();
  ...
};

個人的には、この方法はずっと気持ちがいいです.

3-2. あつりょくそし

コンテナ構成部品が受信したpropsを使用して簡単にレンダリングされる構成部品.

const Counter = ({ number, onIncrease }) => {
  return (
    <div>{number}</div>
    <button onClick={() => onIncrease()} />
  );
};

初めてリデックスに触れた時、ちょっと複雑な感じがして、整理してみるとそんなに難しくないことに気づきました.
最近はhooksのせいか容器素子とpresental素子が区別されていないことが多い.また、Redux Toolkitを使用する場合はReduxを使用するのが一般的ですもっと勉強しなさい