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

posted @ 2020-03-22 16:11  痞子不说情话  阅读(272)  评论(0编辑  收藏  举报