redux---react状态管理工具

一、redux概念

了解react小伙伴应该对redux不陌生，redux作为目前react流行的状态管理工具，已经越来越受开发者的喜爱。而redux是由Flux演变而来，它原先是基于简化版的Flux框架。需要说明的是redux是单向数据流。通过store向一个方向传递数据。 

如图所示，中间的store是redux的数据仓库，所有的数据都被保存在store容器里面，并且一个项目中只能有一个store。而对于store，里面的状态可以是基本类型、数组或对象，所有的状态都是以一个对象树的形式储存在一个单一的 store 中。如果改变状态（数据），就要通过触发action来修改。reducers是纯函数，state就是听过它来并且通过action来修改。

二、redux三大原则

1、单一数据源  

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

2、State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

3、使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

三、安装

1、npm安装

npm install --save redux

2、yarn安装

yarn add redux

3、直接引入

redux 的 npm 包里 dist目录下包含了预编译好的生产环境和开发环境下的 UMD文件，可以直接在页面上的 <script> 标签 中引入 UMD 文件

四、配置

注意，以下所有配置方式是在react脚手架中配置

下载好以后，开始配置redux。首先在src文件夹下新建store文件夹，再新建reducers.js文件。

var initState ={  //状态的初始值
    n:5
}
var reducer=(state=initState,action)=>{  //state 数据  action动作
   
   return state;
}

export default reducer;

上面的代码的意思是：

1. 定义了一个初始状态值；

2. 创建了一个reducer的方法。第一个参数state，将initState中的数据赋值给state，第二个参数action是一个对象，两大参数： type - 表示将要执行的动作，type 会被定义成字符串常量；payload - 用于更新状态的数据。

reducer 是一个纯函数，接收旧的 state 和 action，返回新的 state。对于reducer纯函数，只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。纯函数是有以下一些规则：

• 禁止修改传入参数；
• 禁止执行有副作用的操作，如 API 请求和路由跳转；
• 禁止调用非纯函数，如 Date.now() 或 Math.random()。

接着再新建index.js文件。

import {createStore} from 'redux'
import reducer from './reducer'
var store = createStore(reducer);  //仓库是唯一的

export default store;

首先从redux包中引入createStore()方法。createStore(reducer)相当于函数调用将新数据放到仓库（生成store）。

然后在src新建list文件夹，在里面建个list.js。在这个组件中获取store中的值，并且修改store的值。如下

import React, { Component } from 'react'
import store from "./store/index"
export default class List extends Component {
    constructor(props){
        super(props);
        this.state={
            n:store.getState().n
        }
        //subscribe监听store里的数据变化
        store.subscribe(()=>{
            this.setState({
                n:store.getState().n
            })
        })
    }
    change=(num)=>{
        //dispatch抛发action对象；
        store.dispatch({type:"IMC",p:num});
    }
    render() {
        console.log(store.getState().n)
        return (
            <div>
             
                 {store.getState().n}
                 <button onClick={this.change.bind(this,1)}>+</button>
            </div>
        )
    }
}

上面代码为一个修改store数量的组件。先引入store仓库。获取store的方法是store.getState().state中的变量名。

如上，在控制台打印了store里面的方法以及store.getState()的数值。

redux是通过 subscribe(listener) 注册监听器;listener里面是回调函数，用于监听store里的数据变化；否则store实际的数据发生改变，但界面的数据没有更新。

而修改数据时通过store.dispatch（）来修改的。dispatch（）是抛发动作，里面是action对象；里面可以定义动作类型type以及变更的数据。上面代码是每次加1.所以将num作为action传入对象中变化的数据。

var initState ={  //状态的初始值
  n:5
}
var reducer=(state=initState,action)=>{  //state 数据  action动作
  switch(action.type){
    case "IMC":
      var newState={...state};
      newState.n +=action.p;
      // console.log(newState);
      return newState;
  
    default:
      return state;
    }
}

export default reducer;

如上，在reducers.js文件中进行数据的处理。reducers是纯函数，action里面的type类型两侧一定要一致，不匹配的话不会修改成功。因为state是只读的，所以需要新定义个变量并且拷贝state的值；而后进行修改操作，最后返回新的值。这样实现了最简单的store加1的修改操作。

参考资料：https://www.redux.org.cn/ redux官网