react中使用reflux进行全局状态管理最简单的案例

之前写过一个react中使用reflux进行全局状态管理的博客，由于刚从vue转到react，还有很多不熟悉的地方，有一些问题没有理解透彻，今天再写一个简单案例描述一下reflux是如何进行全局状态管理的。
#创建react项目并进入项目根目录
create-react-app refluxtest
cd refluxtest
#安装reflux
npm install reflux
#创建action与store相关文件
countAction.js

//引入reflux模块
import Reflux from "reflux";
//创建action并注入两个事件（也可以叫动作）countAdd、countSub
const CountAction = Reflux.createActions(["countAdd","countSub"]);

export default CountAction;

countStore.js

//引入reflux模块
import Reflux from "reflux"
//引入事件（动作）
import CountAction from "../action/countAction.js";

//这里类必须继承自Reflux.Store
class CountStore extends Reflux.Store {
    constructor() {
        super();
        //监听加1与减1动作并执行事件函数
        this.listenTo(CountAction.countAdd, this.onCountAdd);
        this.listenTo(CountAction.countSub, this.onCountSub);
        //这里填写全局的属性状态
        this.state = {
            count: 0
        }
    }

    //countAdd事件执行的函数，这里的写法是固定的on + 首字母大写的动作事件
    onCountAdd = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    //countSub事件执行的函数
    onCountSub = () => {
        if (this.state.count > 0) {
            this.setState({
                count: this.state.count - 1
            })
        }
    }
}

export default CountStore

#创建页面文件
refluxTest.js

//引入reflux模块
import Reflux from "reflux"
//引入action与store
import CountAction from "./action/countAction.js";
import CountStore from "./store/countStore.js";

//这里类必须继承自Reflux.Component
class RefluxText extends Reflux.Component {
    constructor(props) {
        super(props);
        //state里面你可以填入本页面的状态属性
        this.state = {};
        //注入全局状态
        this.store = CountStore;
    }

    render() {
        return (
            <div>
                <div>{this.state.count}</div>
                <button onClick={CountAction.countAdd}> +1</button>
                <button onClick={CountAction.countSub}> -1</button>
            </div>
        )
    }
}

export default RefluxText

#在App.js中引用页面

import './App.css';
import RefluxText from "./refluxTest";
function App() {
  return (
      <RefluxText></RefluxText>
  );
}

export default App;

#查看效果，运行命令
npm start
至此一个简单的reflux状态管理就完成了。
项目源码下载地址：https://download.csdn.net/download/u012211003/13991862