Redux(状态管理JS库)的使用

1.redux是什么 ☀️

🌸 redux是一个专门用于状态管理的JS库

1.作用范围：它可以用在react，angular，Vue等项目中，但基本与react配合使用，(Vue一般使用Vuex)
2.作用：集中式管理react应用中多个组件的共享状态

2.什么时候用redux 🌀

1.某个组件的状态，需要让其他组件可以随时拿到（共享）
2.一个组件需要改变另一个组件的状态 （通信）
3.总体原则：能不用就不用，如果不用比较吃力才考虑使用
4.一般使用消息订阅与发布机制

3.redux的基本原则 ❄️

🌼 唯一数据源
🌼 保持状态只读
🌼 数据改变只能通过纯函数完成

1.唯一数据源指的是应用的状态数据，应该只存储在唯一的一个store上
2.保持状态只读，就是说不能去直接修改状态，要修改store的状态，必须要通过派发一个action对象完成。
（驱动用户界面渲染，就要改变应用的状态，但是改变状态的方法不是去修改状态上的值，而是创建一个新的状态对象返回给Redux，由Redux完成新的状态组装）
3.这里说的纯函数就是Reducer

在Redux中，reducer的函数签名：
🌐 reducer(state,action)

	第一个参数state是当前的状态
	第二个参数action是接受到的action对象，
	而reducer函数要做的就是根据state和action的值产生一个新对象返回
	注意reducer必须是一个纯函数，也就是说函数的返回结果必须完全由参数state和action决定，同时也不能修改参数state和action对象

4.redux的三个核心概念 ⚠️

🌌 action

	1.动作的对象
	2.包含2个属性
		type:标识属性，值为字符串，唯一，必要属性
		data:数据属性，值类型任意，可选属性
	3.例如:  {type:"increment",data:10}

🌌 reducer

	1.用于初始化状态，加工状态
	2.加工时，根据旧的state和action，产生新的state的纯函数

🌌 store

	1.将state,action，redux联系在一起
	2.如何得到此对象？
	   ①import  {createStore} from 'redux'
	   ②import reducer from './reducer'
	   ③const store = createStore(reducer)
	3.此对象的功能？
	  ①getState():得到state
	  ②dispatch(action):分发action，触发render调用，产生新的state
	  ③subscribe(listener)：注册监听，当产生了新的state时，自动调用

5.redux的核心API 🎯

🎬 createStore()

	1.作用：创建包含指定reducer的store对象

🎬 store对象

	1.作用：redux库最核心的管理对象
	2.内部维护着：
				state
				reducer
	3.核心方法：
				①getState()
				②dispatch(action)
				③store.subscribe(listener)
	4.具体实现
				store.getState()
				store.dispatch({type:'increment',data:100})
				store.subscibe(render)

🎬 action

	1.action有两种值：
				 object类型的action     -----被称为同步类型的action
				 function类型的action   -----被称为异步类型的action
	2.异步action：延迟的动作不想交给组件自身，想交给action,想要对状态进行操作，但是具体的数据靠异步返回
	3.怎样使用：yarn add  redux-thunk ，并配置在store中，创建action函数不在返回一般对象，而是一个函数，该函数中写异步任务，异步任务有结果后，分发一个同步action去真正操作数据

案例：
Count组件，在components/Count下

import React,{
   Component} from 'react'
import {
   Decrement,Increment} from '../../redux/count_action';
import store from '../../redux/store'

export default class Count extends Component{
   

    increment=()=>{
   
    const {
   value} = this.number;
    store.dispatch(Increment(value*1));
    }

    decrement=()=>{
   
        const {
   value} = this.number;
        store.dispatch(Decrement(value*1));
    }

    IfOddIncrement= ()=>{
   
      const {
   value} = this.number;
      if(store.getState() % 2 !==0 ){
   
          store.dispatch(Increment(value*1));
      }
    }
    IncrementAsync=()=>{
   
      const {
   value} = this.number;
     setTimeout(()=>{
   
        store.dispatch(Increment(value*1));
     },1000)
    }

    render(){
   
        return(
            <div >
                <h2 >当前的求和的值:{
   store.getState()}</h2>

                <select ref={
    c=> this.number=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.IfOddIncrement}>值为奇数时加</button>
                <button onClick={
   this.IncrementAsync}>异步加</button>
            </div>
        )
    }
<