React でのコンポーネント通信 (react18) 06 - redux-toolkit + accept-redux
1 はじめに
1.1 reduxとreact-redux
- 過去2回の記事を紹介していますので、必要な方はクリックしてご覧ください:
Reactでのコンポーネント通信(react18) 04 - redux入門.
Reactでのコンポーネント通信(react18) 05 - redux ➕ react-redux(データ共有を含む）。
1.2 redux-toolkitについて
1.2.1 公式ウェブサイト
1.2.2 Redux ツールキットを使用する理由
- まず、公式サイトには何と書いてあるでしょうか？
- 次に、次のように、コード内で createStore が非推奨になっていることがわかります。
1.3 Redux ツールキットのインストール
- インストールコマンドは以下の通り
npm install @reduxjs/toolkit yarn add @reduxjs/toolkit - プロジェクトにreact-reduxがインストールされていない場合は、両方を一緒にインストールできますが、reduxを個別にインストールする必要はありません
react-redux + redux-toolkit。react-redux + reduxnpm install @reduxjs/toolkit react-redux yarn add @reduxjs/toolkit react-redux
1.4 Redux Toolkit 関連の API
-
いくつか簡単に紹介しましょう
-
公式サイトが充実しているので公式サイトへ
2. 起動例 - 公式サイトの例
- プロセスについては、以下の公式アドレスを参照してください:
https://cn.react-redux.js.org/tutorials/quick-start/。
2.1 Reduxストアの作成
- Redux Toolkit から configureStore API をインポートします。まず空の Redux ストアを作成し、次のようにエクスポートします。
import { configureStore } from '@reduxjs/toolkit'; export default configureStore({ reducer: { }, }); - これにより Redux ストアが作成され、Redux DevTools 拡張機能を自動的に構成する, 開発中にストアを確認できるようにします。
2.2 React 用の Redux ストアの提供
- 次のように、これを以前と同じように変更しないでください。
2.3 Redux ステート スライスの作成
2.3.1 counterSlice.js ファイル
- スライスを作成するには、スライスを識別する文字列名、初期状態値、および状態の更新方法を定義する 1 つ以上のリデューサー関数が必要です。スライスを作成した後、次のことができます。生成された Redux アクション クリエーターとスライス リデューサー関数全体をエクスポートします。。
- 次のように：
2.3.2 以前のアクションとリデューサーを比較する
- 前回のアクションの記述方法は次のとおりです。
function incrementOne(){ type:'INCREMENT_ONE' } function incrementNumber(number){ type:'INCREMENT_NUMBER', number:number } export default{ incrementOne,incrementNumber} - 前回のreducerの書き方は以下の通りです
function countReducer(state = 0,action){ switch (action.type) { case 'INCREMENT_ONE': return state + 1; case 'INCREMENT_NUMBER': return state + action.number; default: return state; } } export default{ countReducer}
2.4 スライス レデューサーをストアに追加する
- 次に、reducer 関数をカウンタースライスからインポートし、ストアに追加する必要があります。Reducers パラメーターのフィールドを定義することで、このスライス リデューサー関数を使用してこの状態へのすべての更新を処理するようにストアに指示します。
- したがって
store.js、最終的には次のようになります。
2.5 React コンポーネントでの Redux ステートとアクションの使用
- これで、React Redux フックを使用して、React コンポーネントが Redux ストアと対話できるようになります。我々はできるuseSelector を使用してストアからデータを読み取ります (props 経由ではありません)。、
useDispatchディスパッチアクションを使用します。 - コンポーネント内の設計は次のとおりです。
2.6 レンダリング
- 同じコード
2.7 効果
2.7.1 エフェクト表示
- 次のように：
2.7.2 説明
- [Click me +1]、[Click me -1]、および [Add] ボタンをクリックすると、
対応する Redux アクションがストアにディスパッチされ、
カウンティング スライス リデューサーがアクションを確認してその状態を更新し、
<Counter>コンポーネントがそれを確認します。ストアの新しい状態値から取得し、新しいデータを使用して自身を再レンダリングします。
2.8 注:
- 次のように：
2.9 付属コード
-
counterSlice.js
import { createSlice} from '@reduxjs/toolkit' export const counterSlice = createSlice({ name: 'myFirstCounterSlice', //这个名字随便取 标识 initialState: { value: 0, //初始值 }, reducers: { // 对比之前的reducer是一个函数，里面是根据不同的action的type判断的switch语句 incrementOne: (state) =>{ //下面生成 加 1 的action，等价于原先只有type的action state.value += 1; }, decrementOne: (state) =>{ //下面生成 减 1 的action，等价于原先只有type的action state.value -= 1; },incrementNumber: (state,action) =>{ //等价于不只有type一个参数的action state.value += action.payload; //payload } } }); // 为每个 case reducer 函数生成 Action creators export const { incrementOne,decrementOne,incrementNumber} = counterSlice.actions; const countReducer = counterSlice.reducer; export default countReducer; -
ストア.js
import { configureStore } from '@reduxjs/toolkit'; import countReducer from './reducerAndAction/counterSlice'; export default configureStore({ reducer: { counterState: countReducer, }, }); -
Counter.jsx
import { useRef} from "react"; import { useDispatch, useSelector } from 'react-redux' import { incrementOne,decrementOne,incrementNumber} from '../redux/reducerAndAction/counterSlice' function Couter(){ // console.log(props); const numberRef = useRef(); const count = useSelector((state)=>state.counterState.value); const dispatch = useDispatch(); //加 1 的 function addOne(){ dispatch(incrementOne()); } //动态增加 function addNumber(){ const stringNumber = numberRef.current.value; //直接取取的是字符串 const number = parseInt(stringNumber); const addNumberAction = incrementNumber(number); //有参数的action dispatch(addNumberAction); } return( <div> 当前数值是：{ count} <br /> <button onClick={ addOne}>点我+1</button> <button onClick={ ()=>dispatch(decrementOne())}>点我-1</button> <br /><br /> <input type="number" ref={ numberRef} placeholder="请输入要加的数"/> <button onClick={ addNumber}>加数</button> </div> ) } export default Couter;
3. 例 2 - 小さな実践例
3.1 別の Dog コンポーネントを追加する
3.1.1 DogSlice の記述
- 次のように：
3.1.2 store.jsを変更する
- 次のように：
3.1.3 ドッグコンポーネントの記述
- 便宜上、単純に足し算を書いていますが、必要に応じて、次のように自分で最適化することができます。
3.1.4 効果
- 次のように：
3.2 このデータ共有は単純すぎますね?
3.2.1 データ共有を試す
- 直接アクセスしてみてください。コードは次のとおりです。
- これは実際に機能します。これは Redux + React-redux よりもはるかに簡単です。効果は次のとおりです。
3.2.2 React-redux + redux データ共有
なお、react-redux + redux データ共有によるデータ共有の実装方法については、 React (react18) のコンポーネント通信 05 - redux ➕ react-redux (データ共有含む) を参考にして、必要に応じて参照してください。
4. ペイロードについて - ペイロード
- について
state.value += action.payload; //payloadは、例を示しますが、元の Redux をまだ使用している場合は、アクションを次のように記述することもできます。
- 別の例として、「To-Do アイテムを追加する」というアクション作成関数を次のように記述できます。
var id = 1 function addTodo(content) { return { type: 'ADD_TODO', payload: { id: id++, content: content, // 待办事项内容 completed: false // 是否完成的标识 } } } - このように使用される理由は理解できます
action.payload。標準化のため、数値やオブジェクトなど、どのパラメータを渡しても同じです。次のような上記の例を見ると、よりよく理解できるでしょうaction.payload。
5. プロジェクトコード
5.1 コードディレクトリ
- 次のように：
