redux 状态管理工具

安装
	npm i redux --save
三大原则
	1、单一数据源
	2、State是只读的,保证数据可以追溯（需要拿到之前的数据，在进行更改）
	3、使用纯函数来执行修改

状态管理工具

三大原则：
		某个组件的状态，需要共享
				某个状态需要在任何地方都可以拿到
				一个组件需要改变全局状态
				一个组件需要改变另一个组件的状态

查看redux的官网，阮一峰的redux

仓库的使用

app.js引入仓库
创建store和component两个文件夹
创建一个仓库:存数据，改数据，取数据
///存数据 
1、引入 import {createStore}  from  “redux”
2、设置初始数据
initState= {key:value}
	var intial = {
			n:5
		}
将函数传给reducer(两个参数state和action)
var reducer = (state(接受数据)=intial(初始状态),action(动作，如何修改动作))=>{
    console.log(run reducer)//署名这个函数运行了
	return state;
}//reducer这是一个纯函数(只要是同样的输入，必定得到同样的输出
)
//创建仓库
var store = createStore(reducer)//仓库是唯一的，调用reducer函数，将初始值存储到仓库中去
console.log(store)
//导出
export default store
////取数据：
	console.log(store.getState().state中的变量)获取状态

高阶组件(参数是组件，返回值也是组件，Hoc)

1、属性代理
2、反向继承 又名（渲染劫持）

store.dispatch(动作)
action是一定要含有type的一个对象
 动作发给了reducer第二个参数 action
action一定有type，还可能接收一些其他的参数
根据type修改数据

        a.做state的复本
    ​	b.修改state的副本对象
    ​	c.返回新的复本对象

1.切到two,就会走hoc，仓库抛发动作，传给redduccer的action，判断type是不是rec，所以反悔了新的state，
2.此时仓库里面已经是新的path值了，仓库里面存的是登录成功后要跳转的路由的路径，判断有没有这个值，如果有就跳转，
3.store.getState dispatch({type:'xxx',key:value})
4.action对象的type值，千万不能重复
5.store.dispatch(动作)
6.action是一定要含有type的一个对象
7.动作发给了reducer第二个参数 action
8.action一定有type，还可能接收一些其他的参数
9.根据type修改数据
    ​	a.做state的复本
    ​	b.修改state的副本对象
    ​	c.返回新的复本对象

getState()  获取状态 
dispatch ({type,payload})   分发状态
subscribe  监听store里的数据变化

context

Provider生产者  consumer  消费者
创建一个组件MyProvider
引入createContext
将let {Provider,Consumer} =createContext() 解构
<Provider value={666}>{this.props.children}</Provider>  属性一定要叫value，this.props.children一定要写,这个是app组件
export {Myprovider,Consumer}

入口文件引入这个组件并将app包裹

在需要的组件内引入Consumer
import {Consumer} from "MyProvider(组件)"
<Consumer>
    
{
   (value)=>{
    		return <div>{value}</div>
	}
}

 </Consumer>
	

​

在其他钩子里面拿到值
let context = createContext()
let {Provider,Consumer} = context

1、引入context
2、在使用context传来的数据的组件里面写一个静态属性，对静态属性的赋值
	static contextType = context
componentDidMount(){
		设置后就可以拿到this.context传过来的数据
		console.log(this.context)
	}

分模块

	combineReducer（{
		模块的名字：引入的模块
}）

分模块以后
		store.getState() 模块的名字.变量

数据里面套对象，则深拷贝  JSON.parse(JSON.stringfy())  深拷贝	
applyMiddleware  
请求数据后接一个回调，再用dispatch发送给redux,redux接收数据
在store里面的actioncreate里请求数据，

在config。ovvver那个文件里面将@指向src

const {addWebpackAlias)   = require(‘customize-cra’)
const {resolve} = require(‘path’)
addWebpackAllias({
“@”：resolve（’src’）}) 

配置装饰器(mobx)

@babel/plugin-proposal-decorators

const {addDecoratorsLegacy} = require(‘customize-cra’)

module default