redux是解决前端代码由于组件化引起的变量之间不能相互交互的的问题,readux是一个状态管理的仓库,阮老师说能不用redux就不用redux因为redux有时可能会出现卡顿现象。
上图过程值实现了从仓库中取出数据
react的特征主要时:
- 唯一数据源 应用的状态数据应该只存储在唯一的一个
Store
上,即State
树。 - 保存状态只读 不能直接修改
state
的值,必须通过派发action
对象完成。通过getState()
获取值
3. 数据改变只能通过纯函数 这里的纯函数就是reducer
,函数的返回结果必须有
过程:
1、想在仓库中初始话状态
import {createStore} from "redux";
const ADD = "ADD";
const SUB = "SUB";
let initState = {//初始化变量
number:0,
name: 'zs'
};
function reducer(state=initState,action) {
switch (action.type) {
case ADD:
return {number:action.number+1}
case SUB:
return {number:action.number-1}
case 'reset':
console.log(111,action);
return {name:action.name}
}
return state;
}
let store = createStore(reducer);//创建仓库
// window._store = store;
export default store
2、创建好仓库后获取仓库的变量,创库中的装填只能通过action修改才能保证创库中状态的安全性,在页面中创建了action后要把这个action通过dispatch派发给store的reducer进行处理,reducer会根据action的type进行判断然后做出不同的修改
import React from "react";
import store from "../store";
//组件更新 属性更新 状态更新,将redux中的数据转化成自己的状态
export default class Counter extends React.Component{
add = ()=>{
store.dispatch({type:'ADD',count:1})
//通过dispatch派送方法把action对象派送到store中
};
minus = ()=>{
store.dispatch({type:'MINUS',count:1})
};
render(){
return (
<div>
<button onClick={this.add}>+</button>
<p>{store.getState().number}</p>
//通过store中的getState()方法获取store中的值
<button onClick={this.minus}>-</button>
</div>
)
}
}
这样的话对状态树中的值就修改完了。
也可以看一下这篇文章讲的挺好的https://juejin.im/post/5b83be86f265da432a6ae5df
在项目中只使用redux是不能实现状态的取和存这已完整的过程,使用redux只能完成从创库里面取出状态,要想实现另一半过程还要从把页面中的状态存到store中要用到react-redux
所有容器组件都可以访问 Redux store,建议的方式是使用指定的 React Redux 组件 来包裹,让所有容器组件都可以访问 store
react-redux主要时通过connect把组件与仓库连接起来,connect中有四个参数,
connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})
第一个参数的意思时从仓库中映射到逐渐
function mapStateToProps(state) {
return { todos: state.todos }
//todos是组件中的变量,state.todos是仓库中的变量
}
第二个参数是派发到Props,也就是派发动作到仓库
第三个参数mergeProps如果不指定,则默认返回 Object.assign({}, ownProps, stateProps, dispatchProps),顾名思义,mergeProps是合并的意思,将state合并后传递给组件。
第四个参数:options:通过配置项可以更加详细的定义connect的行为,通常只需要执行默认值。
可以参考https://juejin.im/post/5acb67fef265da23a049de90