React学习笔记八——Redux的使用详解

矫情吗；* 2022-10-11 12:16 215阅读 0赞

# 1.Redux是什么 #

*  Redux专门用于做状态管理的JS库，不是React插件库
 *  它可以用在React、vue和angular等项目中，但是基本与React配合使用
 *  集中式管理React应用中多个组件共享的状态

# 2.什么情况下需要使用Redux #

*  某个组件的状态，需要让其他组件可以随时拿到（共享）
 *  一个组件需要改变另一个组件的状态（通信）
 *  能不用就不用，如果不用比较吃力才考虑使用

# 3.Redux的工作流程 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]  
案例：组件内count（0）状态保存在Redux，通过组件中【+1按钮】，来改变count的值；

为了方便理解，我们给参与流程的组件和方法安排个新的身份，这里组件components是**甲方用户**，Action Creators是**产品经理**，store是**领导**，Reducers是**研发部门**

1.  点击【+1按钮】，甲方用户 （组件）需要把需求（"count+1"的事件）告诉Redux中的 产品经理（Action Creators），产品（Action）会创建了一个产品原型（动作对象）例如：\{type:xxxx(增加),data:xxxx(1)\}
2.  通过dispatch()函数，把产品原型（action对象）上交给领导（分发给store）
3.  领导（store）不做操作，是一个调度者，安排其他人继续干活，然后领导（store）把产品原型（动作对象）交给了研发部门（Reducers）去给旧产品（count原始值previousState）+1然后返回个新产品（新状态值2），再把它再交给领导（store）；
4.  甲方用户（组件）通过getState()函数去拿到新产品（获取新的状态值）

# 4.Redux的三个核心概念 #

其实我们上面已经讲解的下面的三个核心的身份和职责；

**Action(产品经理)**

*  动作的对象
 *  对象中的type值是字符串，标识属性，唯一值；data值是任意类型，数据属性，可选属性
 *  例如：\{type:“ADD\_STUFENTINFO”,data:\{id:002,name:‘张三’,age:18\}\}

**Store(领导)**

*  将state，actio，reducer联系在一起的对象
 *  如何得到此对象？

> 1.  import \{createStore\} from “redux”
> 2.  import reducer from “./reducers”
> 3.  const store = createStore(reducer)

*  此对象的功能？

> 1.  getState() 得到新的state
> 2.  dispatch(action) 分发action给store，触发reducer调用，产生新的state
> 3.  subscribe(listener) 注册监听，当产生新的state时，自动调用

**Reducer(研发部门)**

*  用于初始化状态，加工状态
 *  根据旧的state和action对象，产生新的state的纯函数

# 5.Redux的核心API #

**store.getState()**

*  获取store仓库所有state的状态值

**store.dispatch()**

*  参数是action对象
 *  此函数至关重要，把action分发给reducer去更改状态值

**store.subscribe()**

*  订阅功能，只要redux内部状态发生改变，就重新渲染组件
 *  参数是个回调函数

# 6.Redux的完整代码案例 #

效果图：  
![在这里插入图片描述][20210630183750268.png_pic_center]

count组件

import React from "react";
    import store from './redux/store'
    import { incrementAction ,decrementAction，incrementActionAsync } from './redux/count_action'
    
    class Count extends React.Component{ 
     state = { }
     increment = () => { 
       const { value} = this.selectNumber
       store.dispatch(incrementAction(value*1))
     }
     dencrement= () => { 
       const { value} = this.selectNumber
       store.dispatch(decrementAction(value*1))
     }
     incrementIfOdd= () => { 
       const { value} = this.selectNumber
       const count = store.getState()
       if(count % 2 !== 0){ 
         store.dispatch(incrementAction(value*1))
       }
     }
     incrementAscyn= () => { 
       const { value} = this.selectNumber
       store.dispatch(incrementActionAsync(value*1,500))
     }
     render(){ 
       return(
         <div>
           <h2>当前求和{ store.getState()}</h2>
           <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.dencrement}>-</button> 
           <button onClick={ this.incrementIfOdd}>当前总数为奇数+</button> 
           <button onClick={ this.incrementAscyn}>异步+</button> 
         </div>
       )
     }
    }  
    
    export default Demo

store.js

/*该文件专门用于暴露一个store对象，整个应用只有一个store对象*/
    
     import { createStore,applyMiddleware} from "redux"
     //引入为Count组件服务的reducer 
     import reducer from  "./reducers"
     //引入redux-thunk中间件，用于支持异步action
     import thunk from "redux-thunk" 
     
     export default createStore(reducer,applyMiddleware(thunk))

constant.js

/* 该模块用于定义action对象中type类型的常量值, 便于管理和维护的同时，防止程序员单词写错*/
    
    export const INCREMENT = "increment"
    export const DECREMENT = "dencrement"

count\_action.js

/* 该文件专门为Coun组件生成的action对象； action的值为对象是同步，为函数是异步*/
    import { INCREMENT,DECREMENT} from './constant'
    import store from './redux/store'
    
    export const incrementAction = data => ({ type:INCREMENT,data})
    
    export const decrementAction = data => ({ type:DECREMENT,data})
    
    export const incrementActionAsync = (data,time) => { 
      //返回一个函数，函数能开启异步任务
      return (dispatch) => { 
         setTimeout(() => { 
            dispatch(incrementAction(data))
         },time)
      }
    }

count\_reducer.js

/* 1.该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数 2.reducer函数会传入两个参数：分别为：之前的状态（previousState），动作对象（action） */
     
     //redux初始化状态 以后组件reducer多了也可以写成对象
    import { INCREMENT,DECREMENT} from './constant'
    
    const initState = 0 initState = { count:0}
    export defaulr function countReducer(preState=initState,action){ 
      const { type,data} = action
      switch(type){ 
        case INCREMENT:
          return preState + data
        case DECREMENT:
          return preState - data
        default: 
          return preState      
      }
    }

App.js

import React ,{ Component} from 'react'
    //引入容器组件
    import Count from ./container/Count
    import store from './redux/store'
    
    export default class APP extends Component { 
      render(){ 
        <div>
           <Count /> 
        </div>
      }
    }

index.js入口文件

/*为了redux内部状态发生改变，就重新渲染组件, 不用担心一个组件内部状态改变，其他组件会被渲染， 因为diff算法，只会重新渲染状态更改的组件*/
    store.subscribe(() => { 
     ReactDOM.render(<app/>,document....)
    })

> 备注：异步action不是必须要写的，完全可以自己在组件中等待异步任务的结果之后再去分发同步action

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/fb728ac5bdf34a288da3573302071170.png
[20210630183750268.png_pic_center]: /images/20221005/775bf020b6be462181b0b111cdf0cb57.png