项目实训-智能生物序列分析平台-前端模块（4）

在项目中对全局状态管理部分react-mobx，react-redux的使用

一个替换mobx的工具Redux

redux

官方解释：redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具（状态管理机），用来做组件通信等。

前端中的state就是数据，就是一个对象。redux中的state是不能直接修改的，只能通过action来修改，相当于我们在单例中定义setter方法。

redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更。

const INCREMENT = 'INCREMENT'
const incrementAction = {"type": INCREMENT, "count": 2}

上面这就是一个action，说白了就是一个对象，根据里面的type判断做什么操作。

reducer

数据state，指示action都有了那么就是实现了。reducer就是根据action来对state进行操作。

const calculate = (state: ReduxState = initData, action: Action ) => {
    switch (action.type) {
        case INCREMENT:
            return {num: state.num + action.count}
        case REDUCE:
            return {num: state.num - action.count}
        default:
            return state
    }
}
 
export {calculate}

通过reducer操作后返回一个新的state，比如这里根据action的type分别对state.num进行加减。

store

store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有reducer给它。

import { createStore, combineReducers } from "redux";
import { calculate } from "./calculate";
 
// 全局你可以创建多个reducer 在这里统一在一起
const rootReducers = combineReducers({calculate})
// 全局就管理一个store
export const store = createStore(rootReducers)

dispatch

store.dispatch()是组件发出action的唯一方法。

store.dispatch(incrementAction);

通过store调用incrementAction，那么就直接把store里的数据修改了。

<!--pages/home/index.tsx-->
import React, { Component } from 'react';
import './index.css'
import { incrementAction, reduceAction } from '../reducers/calculate';
import { connect } from 'react-redux';
 
<!--定义Home的属性-->
interface Props {
    num: number,
    increment: ()=>any,
    decrement: ()=>any,
}
 
<!--从全局state中拿数据设置到Home的props-->
const mapStateToProps = (state: any) => {
    return {
      num: state.calculate.num
    };
  };
  
  const mapDispatchToProps = (dispatch: any) => ({
    increment: () => dispatch(incrementAction),
    decrement: () => dispatch(reduceAction)
  });
  
<!--组件链接到redux的store-->
@(connect( mapStateToProps, mapDispatchToProps, ) as any)
export default class Home extends Component<Props, any> {
    render() {
        return <div className='container'>
            <p onClick={this.props.increment}>click to increment num</p>
            <p onClick={this.props.decrement}>click to decrement num</p>
            <p>{this.props.num}</p>
        </div>
    }
}

一个store可以添加多个reducer，比如这里是一个加减的reducer，你还可以分文件创建其它的操作，便于分类管理。只要创建store的时候使用combineReducers全部绑定到一起就可以了。

<!--这里是实现加减的reducer-->
export const INCREMENT = "INCREMENT"
export const REDUCE = "REDUCE"
 
export const incrementAction = {type: INCREMENT, count: 2}
export const reduceAction = {type: REDUCE, count: 1}
 
interface ReduxState {
    num: number
}
 
interface Action {
    type: string,
    count:  number,
}
 
const initData = {
    num: 0
}
 
const calculate = (state: ReduxState = initData, action: Action ) => {
    switch (action.type) {
        case INCREMENT:
            return {num: state.num + action.count}
        case REDUCE:
            return {num: state.num - action.count}
        default:
            return state
    }
}
 
export {calculate}

通过绑定，我们可以到任何的部分拿到全局状态，然后实时更新内部状态。