一个固定的输入,必然会得到一个固定的输出结果
Redux 是 JavaScript 状态管理库, 提供可预测的状态管理。
什么时候用redux?
- 多个组件需要共享同一个状态,各组件可以随时拿到同一个状态的时候
- 一个组件需要改变另一个组件的状态
遵循三大原则
一,单一数据源
整个应用state被存储在一棵object tree中,并且整个对象树只存在于唯一一个store中
二,state是只读的
唯一改变state的方法就是触发action
三,使用纯函数来执行修改
reducer只做一件事情,通过之前的state和当前的action计算得出新的state;
相同的输入必须得到相同的输出结果,因此reducer必须是一个纯函数;
reducer中不应该写有副作用的代码,比如定时器,ajax,获取时间对象与随机数。
使用
在src下创建store
因为代码量会比较庞大,所以将逻辑代码分出去写在reducer文件中。
var initialState = {
count:0
}
//纯函数
//参数一: state , 之前的state状态
//参数二: action , 触发的action动作
var reducer = ( state = initialState, action:any )=>{
//深拷贝state
// var newstate = Object.assign({},state);
var newstate = JSON.parse( JSON.stringify(state) );
if( action.type == 'ADD' ){//这里什么类型执行什么代码,由程序员决定。
newstate.count += action.payload;
return newstate;//返回全新的state
}
else if( action.type == 'SUB' ){
newstate.count -= action.payload;
return newstate;//返回全新的state
}else{
return state; //走到这里说明只是查看,返回旧的state( 之前的state )
}
}
export default reducer;
也可以换一种写法(看个人喜好)
var initialState = {
count:0
}
//纯函数
//参数一: state , 之前的state状态
//参数二: action , 触发的action动作
var reducer = ( state = initialState, action:any )=>{
//深拷贝state
var newstate = JSON.parse( JSON.stringify(state) );
switch(action.type){
case 'ADD':
newstate.count += action.payload;
return newstate;//返回全新的state
case 'SUB':
newstate.count -= action.payload;
return newstate;//返回全新的state
default :
return state; //返回旧的state( 之前的state )
}
}
export default reducer;
在组件中,
getState()获取store中的数据
dispatch()触发action修改store中的数据
subscribe()监听store中的数据变化,会返回一个函数,这个函数就是取消监听的方法
import React, { Component } from 'react';
import store from '../../../store'
class Gwc extends Component {
unsubscribe:any = 0;
componentDidMount() {
//监听store中的数据的变化
this.unsubscribe = store.subscribe(()=>{
this.setState({});
console.log('Gwc 监听回调');
})
}
componentWillUnmount() {
//取消监听
this.unsubscribe();
}
handleClick(){
//触发action, 修改redux中的数据
// store.dispatch( { type:'ADD', payload:5 } );
store.dispatch( { type:'SUB', payload:5 } );
}
render() {
console.log( store.getState() );
return (
<div className='gwc'>
<button onClick={()=>{ this.handleClick() }}>添加</button>
</div>
);
}
}
export default Gwc;