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
