react 中 redux 基本使用

学习笔记的一个记录

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(
            

                {this.changleCont(1)}}>增加
                {store.getState().count}
                {this.changleCont(-1)}}>减少
            
        )
    }

    changleCont(ev){
        console.log(ev)
        store.dispatch({
            type:"CHANGE_COUNT",
            payload:ev
        })
    }
}

export default Add;