react-redux スターター バージョン - 知りたいことはすべてここにあります

1. reduxとは？

• reduxこれは、独立したオープン ソースのサード パーティの集中状態マネージャーです。
• reduxReactand で使用されることに加えて、他のインターフェイス ライブラリもサポートされています。小さくてコンパクトです (依存関係を含めてわずか 2kB)
• We know that reactit is a single-item data flow framework, and statethe data has a read-only attribute. コンポーネント通信では、
  親から子へ: 直接渡すprop、
  子から親へ: 親から子へ渡すメソッド、子コンポーネントがこのメソッドを呼び出すパラメーターを渡すには、
  子を渡します。子: 兄弟はパラメーターを渡し、状態を昇格させます。状態をパブリックの親コンポーネントに昇格させるか、exentBusパブリック コンテナーを作成するために使用します。
• reduxでは、より複雑なコンポーネント関係のためにパラメータを渡すにはどうすればよいでしょうか?特定の状態コンポーネントを他のすべてのコンポーネントで共有する必要がある場合、すべてのコンポーネントはパラメータを渡し、パラメータを受け取る必要がありますか?したがって、この問題を解決するために、共有状態を保存できるリポジトリ。

reduxの動作原理図を見てみましょう

2. redux のコアコンセプト:

コアコンセプト: store、action、reducer

2.1店舗

store: アクションとレデューサーを統合する Redux のコアである Warehouse
機能:

• アプリケーションには 1 つのストアしかありません。アプリケーション全体で管理する必要があるデータは、このストアにあります。レデューサーに関連付けられたオブジェクトです。
• この Store を直接変更することはできません。新しい Store を返すことによってのみ変更できます。Redux は、状態を作成するための createStore を提供します

import {
    
     createStore } from 'redux'
const store = createStore(reducer)

action: Action
2 つの属性を含む js オブジェクト:

• type: 識別属性。値は文字列です。複数のタイプをアクションで区切る
• ペイロード: データ属性、オプション。このアクションによって運ばれるデータを示します
• このアクションは、変更が必要であることをストアに伝えるためにビュー レイヤーによって開始される操作を指します。たとえば、ユーザーがボタンをクリックすると、リストが要求され、リスト内のデータが変更されます。各アクションには、アクションの名前を示す type 属性が必要です。次に、Store の変更用にいくつかのパラメーターを受け取ることができるペイロード属性を指定することもできます。

const action = {
    
    
  type: 'ADD_ITEM',
  payload: 'new item', // 可选属性
}

レデューサー: プロセッサー

• 初期化状態

• ステータスの変更

• redux では、reducer はアクションを処理するために使用される純粋な関数です。アクションが発生すると、リデューサーはアクションのタイプとペイロードに従ってストアの状態を更新します。レデューサーは現在の状態とアクションを取り、元の状態を変更せずに新しい状態を返します。

• レデューサーは純粋な関数として設計されているため、副作用がなく、渡された引数を変更しません。常に同じ入力を使用して同じ出力を生成するため、テストとデバッグが非常に簡単です。

• たとえば、電卓のように、元のデータに 1 を追加する必要があります。古い状態は元のデータに対応し、アクションは 1 を追加する操作に対応し、返される新しい状態は電卓によって返された結果です。追加完了後。

reduce で足し算と引き算を定義する場合

 reducers: {
    
    
    // 处理加法
    increment: (state) => {
    
    
      state.value += 1;
    },
    // 处理减法
    decrement: (state) => {
    
    
      state.value -= 1;
    },
    addValue: (state, action) => {
    
    
      // action.payload为传入的参数
      state.value += action.payload;
    },
  },

3.還元を使う

3.1 インストールは @reduxjs/toolkit に依存

npm i @reduxjs/toolkit react-redux -S

3.2 reduxコードの具体的な構成

1. 倉庫を定義する
src内のstoreフォルダに倉庫を作成し、このフォルダ内に倉庫を編集する
以下はstore内のindex.jsの場合

// 引入configureStore 定义仓库
import {
    
     configureStore } from "@reduxjs/toolkit";

// 定义仓库
export const store = configureStore({
    
    
  // 数据处理器
  reducer: {
    
    },
});

2. ウェアハウスを
main.js にグローバルに挿入してウェアハウスをインポートし、プロバイダーをインポートして
、アプリをプロバイダー タグでラップします。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

// 导入仓库
import {
    
     store } from './store/index'
// 导入provider
import {
    
     Provider } from 'react-redux'
ReactDOM.createRoot(document.getElementById('root')).render(
  // <React.StrictMode>
  <Provider store={
    
    store}>
    <App />
  </Provider>
  // </React.StrictMode>,
)

3. ウェアハウス フラグメントの定義
ストア ファイル内に counterSlice.js スライス ファイルを作成
createSliceスライス機能
nameスライス名
initialState初期状態
reducersプロセッサ
プロセッサとスライス
エクスポートの非同期操作

// 创建计数器切片 slice
// 导入创建切片的函数
import {
    
     createSlice } from "@reduxjs/toolkit";
// 定义初始状态
const initialState = {
    
     value: 5 };
// 创建切片
const counterSlice = createSlice({
    
    
  // 切片名称
  name: "counter",
    // 初始状态
  initialState,
  // 定义处理器
  reducers: {
    
    
    // 处理加法
    increment: (state) => {
    
    
      state.value += 1;
    },
    // 处理减法
    decrement: (state) => {
    
    
      state.value -= 1;
    },
    addValue: (state, action) => {
    
    
      // action.payload为传入的参数
      state.value += action.payload;
    },
  },
});
// 导出处理器
export const {
    
     increment, decrement, addValue } = counterSlice.actions;
// 导出切片
export default counterSlice.reducer;
// 导出异步操作
export const syncAddValue=(value)=>(dispatch)=>{
    
    
    setTimeout(()=>{
    
    
        dispatch(addValue(value))
    },2000)
}

4. ウェアハウス フラグメントを登録し
、store->index.js にインポートして注入します。counterSlice

// 引入configureStore 定义仓库
import {
    
     configureStore } from "@reduxjs/toolkit";
// 导入切片
import counter from "./counterSlice";
// 定义仓库
export const store = configureStore({
    
    
  // 数据处理器
  reducer: {
    
    
    // 注册切片 键值对一致的简写
    counter,
  },
});

5. (method())経由の呼び出しでimport : , ,メソッドで定義された倉庫データ
import , ,メソッドを使用するuseSelectuseDispatch
counterSliceincrenmentdecrementaddValue
dispatchcounterSlice

import {
    
     useSelector, useDispatch } from 'react-redux'
// 导入动作
import {
    
     increment, decrement, addValue } from '@/store/counterSlice'

function DashView() {
    
    
    // 从store中获取数据
    const value = useSelector((state) => state.counter.value)
    // 获取dispatch
    const dispatch = useDispatch()

    return (<>
        <h1>DashView页面 counter的值：{
    
    value}</h1>
        <button onClick={
    
    () => dispatch(increment())}>+1</button>
        <button onClick={
    
    ()=>dispatch(decrement())}>-1</button>
        <button onClick={
    
    ()=>dispatch(addValue(5))}>+5</button>
    </>);
}
export default DashView;

以上がruduxの基礎知識です。