React での redux の基本的な使用法

1. Redux を使用する場合

ここに画像の説明を挿入します

Redux は React で一般的に使用される状態管理ツールで、コンポーネント間で共有されるデータと状態をより適切に管理するのに役立ちます。Redux を使用すると、すべてのコンポーネントが共有する必要がある状態データをグローバルストアに一元化し、管理とメンテナンスを容易にすることができます。

さらに、Redux はアプリケーションの保守性も向上させ、コードの理解とデバッグを容易にします。Redux の 3 つの主要原則 (単一データソース、読み取り専用状態、純粋関数更新状態) により、アプリケーションの予測可能性と安定性が保証されます。

したがって、大規模な React アプリケーションの開発では、Redux を使用してアプリケーションの状態を管理することをお勧めします。ただし、小規模なアプリケーションでは、アプリケーションの状態が比較的単純であれば、React の組み込み状態管理を通じて直接実装できます。

2. リダックスを使用する

2.1. redux のインストール

npm i redux

2.2. 必要な対応ファイル
上記の概略図から、redux の重要なコンポーネントがわかります:
1.Store: アプリケーションの状態を管理するためのストア
2.Reducer: 状態を操作するメソッド (純粋関数) を定義します。 Actionオブジェクトに渡す必要がある
3.Action：状態オブジェクト（種類：操作メソッド名、データ）
4.components：状態管理が必要なコンポーネント

2.3. 対応するファイルの作成
2.3.1. コンポーネントの作成 (コンポーネントはコンポーネントディレクトリに配置されます):

import React, {
    
     Component } from 'react'
import store from '../../redux/store'

import {
    
    creDecAction,creIncAction} from '../../redux/count_action'

export default class Count extends Component {
    
    

  //加法
  increment = ()=>{
    
    
    const {
    
    value} = this.selectNumber
    store.dispatch(creIncAction(value*1))
  }
  //减法
  decrement = ()=>{
    
    
    const {
    
    value} = this.selectNumber
    store.dispatch(creDecAction(value*1))
  }
  //奇数再加
  incrementIfOdd = ()=>{
    
    
    const {
    
    value} = this.selectNumber
    const cont = store.getState();
    if(cont % 2 !== 0)
    store.dispatch(creIncAction(value*1))
  }
  //异步加
  incrementAsync = ()=>{
    
    
    const {
    
    value} = this.selectNumber
    setTimeout(()=>{
    
    
      store.dispatch(creIncAction(value*1))
    },500)
    
  }
  render() {
    
    
    return (
      <div>
        <h1>当前求和为: {
    
    store.getState()}</h1>
         {
    
    /* 选择一次加减多少 */}
        <select ref={
    
    c=>this.selectNumber=c} >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
         {
    
    /* 点击加对应的数 */}
        <button onClick={
    
    this.increment}>+</button>
         {
    
    /* 点击减对应的数 */}
        <button onClick={
    
    this.decrement}>-</button>
        {
    
    /* 点击后 求和为奇数  才加对应的数 */}
        <button onClick={
    
    this.incrementIfOdd}>当前求和为奇数在加</button>
        {
    
    /* 等待一会再加 */}
        <button onClick={
    
    this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

2.3.2. アクションオブジェクトに typ 型の定数値を作成します (redux ディレクトリに置きます)。

// 定义 action对象 中 type类型的常量值

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

2.3.3. アクションの作成 (redux ディレクトリに配置)

import {
    
    INCREMENT,DECREMENT} from './constant'
export function creIncAction(data){
    
    
    return {
    
    type:INCREMENT,data}
}

export function creDecAction(data){
    
    
    return {
    
    type:DECREMENT,data}
}

2.3.4. リデューサーを作成します (redux ディレクトリに配置します)。

import {
    
    INCREMENT,DECREMENT} from './constant'

//初始化状态的值
const initState = 0;
export default function countReducer(preState=initState, action) {
    
    
    
    const {
    
     type, data } = action
 //根据type,执行相应的操作
    switch (type) {
    
    
        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data

        default:
           return preState;
    }
}

2.3.5. ストアを作成します (redux ディレクトリに配置します)。

import {
    
     createStore } from 'redux'

import countReducer from './count_reducer'

export default createStore(countReducer)

2.3.6. 最終的なディレクトリ構造
ここに画像の説明を挿入します
個人ブログ:一生勉強メモ