学习笔记的一个记录
1.下载
npm install --save redux //下载redux并把版本保存到package.json中
npm i -S redux //简写
2.引入
export {createStore} from "redux"; //ES6引入组件方法
3.基本的核心代码
//创建一个函数 注：函数必须是纯函数
//参数prevState得到的是旧状态，参数action得到新状态（分发来的实参）
var reducer = (prevState="initial",action={}) => { //设置初始值：initial
switch(action.type){ //初始action为undefined,需要判断一下有无内容
case "CHANGE_COUNT":
return action.payload
default:
return prevState
}
return prevState //因为有上面判断，这句可删
}
const store = createStore(reducer)
export default store;
4.派发
store.dispatch({
type:"CHANGE_COUNT",
payload:step //派发的内容
})
5.订阅消息（store订阅）
store.subscribe(()=>{ //内容更改自动刷新
store.getState() //获取内容
})
例子：加减数
import React,{Component} from "react";
import {createStore} from "redux";
function countReducer(prevState,action){
if(action.type === 'CHANGE_COUNT'){
var clong = {...prevState}
clong.count +=action.payload
return clong
}else{
return prevState
}
}
var store = createStore(countReducer,{
count:11
})
class Add extends Component{
constructor(){
super();
store.subscribe(()=>{
this.setState({})
})
}
render(){
return(
<div >
<button onClick={()=>{this.changleCont(1)}}>增加</button>
{store.getState().count}
<button onClick={()=>{this.changleCont(-1)}}>减少</button>
</div>
)
}
changleCont(ev){
console.log(ev)
store.dispatch({
type:"CHANGE_COUNT",
payload:ev
})
}
}
export default Add;
