Redoxを勉強してredoxを使いやすい方法を理解してRTK

Redux Tool Kit(RTK)

RTKはredux公式ドキュメントに推奨する機能です.
RTKには、reduxのコア部分と、reduxアプリケーションの作成に必要な要素が含まれています.
また、redoxを使用すると使いやすく、エラーを防ぐことができます.
ストレージ設定、reduce、可変ステータスロジック、およびさまざまなステータス管理が容易になります.
まずRTKを設定します.
RTK installnpm install @reduxjs/toolkitNOTE:CRA構成項目.
RTK上でCRAを構成するためには、ライブラリを毎日インストールする必要はなく、以下のコマンドでインストールするだけです.npx create-react-app folder-name --template reduxRTKとreact-redoxライブラリを独自にインストールします.

Create a Redux Store

次に、redox storeを作成します.
RTKからAPIを取得するストレージを設定します.
configureStoreはstoreを生成するAPIです.
オブジェクトをパラメータとして指定し、減速機構成を設定し、オブジェクトをvalue値として宣言します.src/app/store.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({ reducer: {} });

export default store;

configureStore APIでは、redux devtoolsを自動的に実行できます.

Provide the Redux Store to React

次に、既存のReduxのようにstoreをインポートし、Providerでパッケージします.index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./app/store";
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

Create a Redux State Slice

src/features/counter/counterSlice.jsパスでファイルを生成します.
createsliceという名前のAPIを取得しました.
actionとaction関数を作成する必要がなく、対応するAPIでstate updateロジックを構成できます.
createSlice()のパラメータを使用してオブジェクトを割り当てます.
オブジェクトに3つのプロシージャを作成します.

name
アクションタイプの作成に使用します.

initialState

reducers

ここで,reducersは動作生成関数とreduceの役割を同時に果たすと考えられる.
次のコードを見てください.src/features/counter/counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// 셀렉터 함수
export const selectCount = state => state.count.value

// 액션생성함수
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

//리듀서
const counterReducer = counterSlice.reducer;
export default counterReducer;

上のコードを見て、動作と動作生成関数はありません.
RTKはSlice API内部から動作と動作関数を生成する.
アクション生成の論理は、上記のname(「counter」)とreducersのincrementフィールドを組み合わせて、内部で「counter/increment」というアクションを生成することである.
アクション作成関数のインポート
dispatchのためにreducersによって生成されたaction生島関数を導出した.
ここからアクション生成関数を取得するには、Sliceにアクセスする必要があります.
持ってきた方法はSliceActions(反Slice.actions).
構造分解は、上記で宣言したアクション生成関数を取得します.
Reduserのインポート
また、この減速機も出口します.
このためにSlice減速機に近づけばいいです.
コレクタ関数の作成export const selectCount = state => state.count.value上記の例ではselector関数という名前を作成しました.
これは、この状態値を使用する構成部品においてuserSelectを容易に使用するために作成されたものである.
上で作成したセレクタ関数は、次のとおりです.
fromconst count = useSelector((state) => state.counter.value);toconst count = useSelector(selectCount);このように便利に使えます.
mutable or immutable
上記の動作生成関数では,不変性を維持せずにstateを更新することが見られる.
(stateを更新するときは不変性を保たなければならない.)
これはcreateSlice API内部にimmerの機能があるためである.(柔軟に更新できる機能)

Add Slice Reducers to the Store

このsliceをstoreに保存します.src/app/store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

const store = configureStore({ reducer: { counter: counterReducer } });

export default store;

オブジェクトをreduce propertyの値として宣言することでreduceを割り当てます.

Use Redux State and Actions in React Components

次に,以前のようにuserSelectorとuserDispatchを導入して状態更新を行う.
コードは次のとおりです.src/Counter.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement,selectCount } from "./features/counter/counterSlice";

const Counter = () => {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  return (
    <div>
      <span>{count}</span>
      <div>
        <button onClick={() => dispatch(increment())}>Increment</button>
      </div>
      <div>
        <button onClick={() => dispatch(decrement())}>Decrement</button>
      </div>
    </div>
  );
};

export default Counter;

userSelectorを使用してstate値をクエリーする場合は、configureStore reduceフィールドで定義したreducer名を使用してstate値をクエリーできます.

Writing Async Logic with Thunks

既存の状況で非同期ロジックを実行するには、reactにミドルウェアを適用する必要があります.
ただし、RTKのconfigureStore APIは内部でthunkにミドルウェアを設定しているので、ミドルウェアを別途適用する必要はなく、thunk関数を宣言するだけで使用できます.
Thunk without applying middleware

const fetchUserById = userId => async (dispatch, getState) => {
    try {
      const user = await userAPI.fetchById(userId)
      dispatch(userLoaded(user))
    } catch (err) {
    }
  }

NOTE!

ステータス値をstoreにすべて格納して管理する必要はありません.
ステータス値がグローバルではなく、構成部品内でのみ使用される場合は、usStateを使用して管理できます.

したがって、local componentでステータス値の使用方法を宣言し、storeに入れるかどうかを決定すればよい.

ステータス値を可変管理できないのはなぜですか?

ステータス値の更新は許可されない場合があります.

ステータス値がどのように更新されたかを決定するのは難しい.

Conclusion

既存のreduceよりもRTKの方が使いやすいことがわかる.
action typeとaction関数を単独で作成する必要がない利点、reduceとaction関数を同時に作成できる利点、および1つのsliceですべての論理を作成できる利点は、使いやすいようです.
また、Reduxをreactとともに使用するために、

redux

redux-actions

immer

redux-devtools-extension
同じライブラリをインストールする必要がありますが、RTKは上記の機能を備えており、日常的なインストールの手間を軽減しています.

基本的な使い方は以下の通りですが、ミドルウェアを適用する際にどのように適用するかはさらに学ぶ必要があります.
-以上-

Reference

https://redux.js.org/introduction/getting-started

https://redux.js.org/tutorials/quick-start

https://redux.js.org/tutorials/essentials/part-2-app-structure