安装

npm install redux -s

在​​src​​​目录下新建​​store​​​文件夹，新增​​index.js​​文件

导入​​redux​​基本模块

import { createStore } from 'redux';
const store = createStore();
export default store;

再新增​​reducer.js​​文件，这里存放共享的变量

const defaultState = {
    countNum: 0
}
export default (state = defaultState,) => {
    return state;
}

在​​index.js​​进行导入

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;

将class组件与store进行绑定

import React, { Component } from 'react';
import store from '@/store';
class Redux extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    componentDidMount() {
        let value = store.getState()
        this.setState(
            value
        )
    }
}

export default Redux;

给​​countNum​​执行累加 > 累加的值传给store > 组件监听store的变化，重新赋值给组件的state

按钮累加

addCount() {
        let count = {
            type: "add", //必须要传个type字段，value可自定义
            value: this.state.countNum += 1
        }
        store.dispatch(count);
    }
   render() {
        return (
            <div>
                {this.state.countNum}
                <button onClick={() => this.addCount()}>数值加1</button>
            </div>
        );
    }

​​reducer.js​​​ 中接收 action，返回最新数据给​​store​​

const defaultState = {
    countNum: 0
}
export default (state = defaultState,) => {
    if (action.type == "add") {
        return { countNum: action.value }
    }
    return state;
}
componentDidMount() {
     // 注册监听store，store变化后调用组件的changeStore方法更新组件的state
     store.subscribe(this.changeStore);
  }
  changeStore = () => {
     this.setState(
        store.getState()
     )
  }