一、什么是redux：
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。
二、安装与引入：
npm install --save redux //安装
import { createStore } from 'redux' //引入
三、redux三大原则：
单一数据源、state是只读的，使用纯函数来执行修改。
四、使用redux：
当安装好redux包并引入以后，我们通过creteStore(reducer)创建一个store状态机，用于状态管理。
reducer是一个纯函数【纯函数即返回值只有传入的参数决定】，reducer(state,action)有2个参数,state为当前的状态，action 就是一个描述“发生了什么”的普通对象，reducer中通过switch流程控制语句判断action.type的值，来更改state。
通过使用store.dispatch(action)来触发aciton的改变，然后通过store.subscribe(()=>{}),来手动订阅更新，当store.dispatch(action)后，就会触发store.subscribe。通过使用store.getState()获取当前store中state状态。
1、State：
1.1、DomainState：服务端返回的State；
1.2、UI State：关于当前组件的State；
1.3、App State：全局的State；
2、Action事件：
2.1、本质就是一个JS对象；
2.2、必须包含type属性；
2.3、只是描述了有事情要发生，并没有描述如何去更新State；
3、 Reducer：
3.1、本质就是函数；
3.2、响应发送过来的Action；
3.3、函数接收两个参数，第一个是初始化State，另一个是发送过来的Action；
3.4、必须要有return返回值；
4、Store：
Store就是把action与reducer联系到一起的对象。
主要职责：
4.1、维持应用的state；
4.2、提供getState()方法获取state；
4.3、提供dispatch()方法发送action;
4.4、通过subscribe()方法注册监听；
4.5、通过subscribe()返回值注销监听。
Import {createStore} from ‘redux’
const store = createStore(传递的reducer)五、使用：
项目结构如下：
1、创建一个Action：
1.1、在根目录下创建一个文件夹action，在action下创建一个index.js文件用来构建Action：
const sendAction = () => {...} ；
1.2、在action创建函数里面利用return返回一个action对象，注意要携带type属性：
const sendAction = () => {return {type: ‘send_action’, value: ‘发送了一个action’}}
1.3、把这个action创建函数进行导出：
module.exports = { sendAction }代码：
const sendAction = () => {
return {
type: 'send_type',
value: '这是一个action'
}
}
module.exports = {
sendAction
}2、创建一个Reducer：
2.1、在根目录下创建一个reducer目录，在reducer目录下创建一个index.js文件用来构建reducer，注意reducer要有两个接收函数：
const rootReducer = (state, action) => {...} 2.2、第一个参数是默认状态，我们可以定义一个初始化的state，然后进行赋值：
const initState = {value: ‘默认值’}
const rootReducer = (state=initState , action) => {...} 2.3、在函数里面判断第二个参数action的type值是否是我们需要发送的，如果是的话我们可以通过return返回新的state；
2.4、把reducer进行导出；
代码：
const initState = {
value: "默认值"
}
const reducer = (state = initState, action) => {
switch(action.type){
case "send_type":
return Object.assign({}, state, action) ;
default:
return state;
}
}
module.exports = {
reducer
}3、构建Store：
3.1、在根目录下创建store文件夹，在store文件夹下创建index.js文件来构建store，注意createStore函数里面第一个参数是reducer：
import {createStore} from ‘redux’
// 在此导入创建的reducer
const store = createStore(reducer)3.2、createStore返回值就是我们创建的store；
3.3、将创建的store进行导出；
代码：
import {createStore} from 'redux'
import {reducer} from '../reducer'
const store = createStore(reducer);
export default store;4、在组件中使用：
4.1、给组件ButtonCom.js中的button按钮绑定一个点击事件；
4.2、在组件一加载完毕的时候我们通过store来进行监听器的注册，返回值可以用来注销监听：
this.unSubscribe = store.subscribe(()=>{...})4.3、在点击事件函数处理中通过store.dispatch来发送一个action：
handle = () => {
store.dispatch(sendAction());
}代码：
import React from 'react'
import { Button } from 'antd';
import { RedoOutlined } from '@ant-design/icons';
import store from './store'
import {sendAction} from './action'
export default class MenuCom extends React.Component {
componentDidMount(){
store.subscribe(()=>{
this.setState({}, function(){
console.log("subscribe store.getState()");
console.log(store.getState());
});
})
}
handleClick = ()=>{
const action = sendAction();
store.dispatch(action);
}
render() {
return (<>
<Button type="primary" icon={<RedoOutlined/>} ghost onClick={()=>this.handleClick()}>修改</Button>
<div>{store.getState().value}</div>
</>)
}
}六、总结：
