react中redux的基本使用

一、什么情况下使用 Redux

在这里插入图片描述

Redux是React中常用的状态管理工具，它可以帮助我们更好地管理组件之间共享的数据和状态。使用Redux，我们可以把所有组件需要共享的状态数据集中到一个全局的store中，方便我们管理和维护。

另外，Redux也能够提高应用程序的可维护性，使得代码更易于理解和调试。Redux的三大原则——单一数据源、状态只读、纯函数更新状态——保证了应用程序的可预测性和稳定性。

因此，在大型的React应用程序开发中，使用Redux来管理应用程序的状态是值得推荐的。但是在小型应用程序中，如果应用的状态较为简单，可以直接通过React的内置状态管理来实现。

二、使用redux

2.1、安装redux

npm i redux

2.2、需要的相应文件
通过上述原理图，我们可以看出redux的重要组成部分：
1.Store：store来管理应用程序的状态
2.Reducer：定义对状态操作的方法(纯函数)，需要传入一个Action对象
3.Action：状态对象（type:操作方法名，数据）
4.components:需要进行状态管理的组件

2.3、创建相应的文件
2.3.1.创建组件（组件放在components目录下）：

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、创建action对象中的 typ类型常量值（放在redux目录下）：

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

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

2.3.3、创建action（放在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、创建reducer（放在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、创建store（放在redux目录下）

import {
    
     createStore } from 'redux'

import countReducer from './count_reducer'

export default createStore(countReducer)

2.3.6、最终目录结构
在这里插入图片描述
个人博客：余生的学习笔记