redux的入门学习 没有分离的版本

1:安装 npm i redux

2:准备好几个页面  第一个显示数据  第二个做加法  第三个做减法

import React, { Component } from 'react'

export default class Menu1 extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>
                第一个页面 显示数据
            </div>
        )
    }
}

import React, { Component } from 'react'

export default class Menu2 extends Component {
    render() {
        return (
            <div>
               第二个页面 做加法
            </div>
        )
    }
}

import React, { Component } from 'react'


export default class Menu3 extends Component {
    render() {
        return (
            <div>
                第三个页面 做减法
            </div>
        )
    }
}

3:在src中创建一个文件夹store 里面新建一个index.js 用来做全局的数据管理   第一步先做显示  声明一个数据做导出

import  {createStore} from  "redux"

let  numReducer =(state={num:10},action)=>{

    return  state;
}
export default  createStore(numReducer);

4:显示我们的全局数据num  修改第一个页面

import React, { Component } from 'react'
import  store  from  "../store"

export default class Menu1 extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>
                第一个页面 显示数据 {store.getState().num}
            </div>
        )
    }
}

5:去第二个页面修改数据

import React, { Component } from 'react'
import  store from  "../store"

export default class Menu2 extends Component {
    render() {
        return (
            <div>
               第二个页面 做加法 <button onClick={
                   ()=>{
                       store.dispatch({
                           type:"add",
                           num:2
                       })
                   }
               }>+</button>
            </div>
        )
    }
}

6:回去修改我们store中的index.js  对action进行处理  每次调用的时候  dispatch会传递一个新的action过来

import  {createStore} from  "redux"

let  numReducer =(state={num:10},action)=>{
    switch(action.type){
        case  "add":
            return  {num:state.num+action.num}
    }

    return  state;
}
export default  createStore(numReducer);

7:再去第三个页面 照葫芦画瓢 去做减法

import React, { Component } from 'react'
import  store  from  "../store"


export default class Menu3 extends Component {
    render() {
        return (
            <div>
                第三个页面 做减法 <button onClick={()=>{
                    store.dispatch({
                        type:"reduce",
                        num:5
                    })
                }}>-</button>
            </div>
        )
    }
}

8:在store/index.js中添加减法的处理

import  {createStore} from  "redux"

let  numReducer =(state={num:10},action)=>{
    switch(action.type){
        case  "add":
            return  {num:state.num+action.num}
        case  "reduce":
            return  {num:state.num-action.num}
    }

    return  state;
}
export default  createStore(numReducer);