Basic use of redux in react

1. When to use Redux

Redux is a commonly used state management tool in React. It can help us better manage the data and state shared between components. Using Redux, we can centralize the state data that all components need to share into a global store to facilitate our management and maintenance.

In addition, Redux can also improve the maintainability of applications, making the code easier to understand and debug. The three major principles of Redux - single data source, read-only state, and pure function updating state - ensure the predictability and stability of the application.

Therefore, in the development of large-scale React applications, using Redux to manage the state of the application is recommended. But in small applications, if the application state is relatively simple, it can be implemented directly through React's built-in state management.

2. Use redux

2.1. Install redux

npm i redux

2.2. Required corresponding files.
Through the above schematic diagram, we can see the important components of redux:
1.Store: store to manage the state of the application
2.Reducer: defines the method of operating the state (pure function), which needs to be passed in An Action object
3.Action: state object (type: operation method name, data)
4.components: components that require state management

2.3. Create corresponding files
2.3.1. Create components (components are placed in the components directory):

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. Create a typ type constant value in the action object (place it in the redux directory):

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

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

2.3.3. Create action (place it in the redux directory)

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

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

2.3.4. Create a reducer (place it in the redux directory)

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. Create a store (place it in the redux directory)

import {
    
     createStore } from 'redux'

import countReducer from './count_reducer'

export default createStore(countReducer)

2.3.6. Final directory structure

Personal blog: Study notes for the rest of my life