react中教你如何快速使用reflux进行全局变量管理

前言

就目前网上一些关于react中使用reflux的教程，坑比较多，解释的也不够通俗，代码也非常零碎，结合自己踩过的坑，给大家举个简单易懂的react中使用reflux的基础例子,希望对vue转react或者只接触过react的朋友一点帮助。

安装reflux

我自己采用的是ts + react的开发模式，不管你采用的是js还是ts，我这里不做赘述，假定你的开发环境全都安装好了，接下来我们需要安装reflux插件，执行命令：
npm install reflux

Reflux是根据React的flux创建的单向数据流类库。
Reflux的单向数据流模式主要由actions和stores组成。例如，当页面中数组litems新增item元素时，会调用actions的某个方法（如addItem(item)）,并将新的数据当参数传递进去，通过事件机制，数据会传递到stroes中，stores更新数据并反馈到页面中。
就像这样：

创建actions

import Reflux from "reflux"
//这里创建一个动作（函数）集，类似于消息发布者（通俗点叫动作发布者），下面制定了三个动作（函数）
//在store中会对这三个动作进行监听
var actions = Reflux.createActions(["getAllItems","addItem","deleteItem"]);
export default actions;

创建stores

import Reflux from "reflux"
//引入需要监听的actions
import actions from "../actions/mainpageActions"

var store = Reflux.createStore({
  //这是全局变量，随便定义
  items: ["1", "2", "3"],
  //将actions加入监听队列
  listenables: [actions],
  //这是actions中的"getAllItems","addItem","deleteItem"动作（函数）对应的监听回调函数
  //调用"getAllItems","addItem","deleteItem"时实际上调用的是下面对应的回调函数，这些回调函数类似于动作接收者和动作执行者
  //这里的命名有严格的规定，on表示监听，getAllItems要对应onGetAllItems命名
  onGetAllItems:function(){
    console.log("onGetAllItems:", this.items);
  },
  onAddItem: function (item) {
    this.items.push(item);
    console.log("onAddItem:", this.items);
  },
  onDeleteItem:function () {
    this.items.pop();
    console.log("onDeleteItem:", this.items);
  }
});
export default store;

展示页面

// @ts-ignore
import React, {Component} from 'react'
import {View, Text} from '@tarojs/components'
import {AtNavBar, AtToast, AtBadge, AtIcon, AtButton, AtInput} from "taro-ui"
import Reflux from 'reflux'
import actions from "../../actions/mainpageActions"
import store from "../../store/mainpageStore"

var Taro = require("@tarojs/taro")

interface isState {
  pageTitle: string,
  num: any
}

export default class MainPage extends Component <any, isState> {
  constructor(props: any) {
    super(props)
    this.state = {
      pageTitle: '收件箱',
      num: "",
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    //页面挂载完成时发布获取所有元素的动作，然后回调函数执行获取所有元素的操作
    actions.getAllItems()
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  //添加元素动作，表示发布添加动作，然后回调函数会执行添加动作，并将更新后的数据保存在store中
  add() {
    actions.addItem(this.state.num);
  }

  //删除最后一个元素，原理同上
  delete() {
    actions.deleteItem();
  }

  numChange(value: number) {
    this.setState({
      num: value
    })
  }

  render() {
    return (
      <View>
        <AtNavBar
          color='red'
          title={this.state.pageTitle}
          rightFirstIconType='bullet-list'
        />
        <AtInput
          name='password'
          title='元素 :'
          type='number'
          placeholder='在此输入数字'
          value={this.state.num}
          onChange={this.numChange.bind(this)}
        />
        <AtButton type="primary" onClick={this.add.bind(this)}>加一个元素</AtButton>
        <AtButton type="primary" onClick={this.delete.bind(this)}>减一个元素</AtButton>
      </View>
    )
  }
}

效果图

我就不在页面显示了，直接在后台打印出来，如果要在页面显示只要在state中定义一个变量接收这个全局变量数据即可。
获取所有元素：

添加元素：

删除最后一个元素：