React And TypeScript（二：集成Redux）

前言

社区的状态管理有多种方式，看团队和个人偏好。目前主流状态管理举例。

• Redux idea来自于Flux。依赖于通过集中和不可变的数据的存储的方式来同步数据，并且该数据的更新将触发我们的应用程序的重新渲染。 状态更新通过reducers的函数的显示处理。 由于组织明确，通常更容易理解一个行为将如何影响你的程序的状态。

  -MobX ，该库已经通过TypeScript编写完成。依赖于reactive模式，其中状态包装成可观察的并通过属性传递。 通过简单地将状态标记为可观察来完成任何观察者的状态完全同步。

两者都有不同的优点和权衡。 一般来说，Redux往往会看到更广泛的使用。

（一） 安装Redux

$ yarn add redux react-redux @types/react-redux --dev

这里需要注意：

1. 安装依赖需要加 types 才能得到定义文件(.d.ts）
2. 不需要安装@types/redux因为Redux的定义文件(.d.ts）已经和redux一起安装了。

（二） 定义APP状态

我们需要定义Redux存储的状态。为此，我们需要创建一个名为src/entity/index.tsx的文件，该文件将包含整个程序中可能使用的类型的定义（PS：即数据模型）。

/**
 * @component entity
 * @description 实体数据模型
 * @time 2018/1/9
 * @author ***
 **/
 // 入门demo数据模型
export interface demo { 
    languageName: string;
    enthusiasmLevel: number;
}
// 全局state
export interface StoreState {
    demo: demo;
}

我们的意图是languageName将是此应用程序编写的编程语言（即TypeScript或JavaScript），而enthusiasmLevel会有所不同。
当我们写第一个容器时，我们会明白为什么为何故意使我们的状态与我们的属性略有不同。

（三） 定义行为

（1）创建行为常量 constants
创建`src/constants/demo.tsx“文件，并添加一组让我们的APP能够响应的消息类型。

/**
 * @component constants
 * @description 行为常量
 * @time 2018/1/9
 * @author ***
 **/
export const INCREMENT_ENTHUSIASM = 'INCREMENT_ENTHUSIASM';
export type INCREMENT_ENTHUSIASM = typeof INCREMENT_ENTHUSIASM;

export const DECREMENT_ENTHUSIASM = 'DECREMENT_ENTHUSIASM';
export type DECREMENT_ENTHUSIASM = typeof DECREMENT_ENTHUSIASM;

（2）创建行为和函数 actions

这个const/type模式允许我们一种可访问和可重构的方式使用TypeScript的字符串文本类型。然后，我们在需要创建src/actions/demo.tsx 文件并添加一系列行为和函数。

/**
 * @component actions
 * @description demo动作和函数
 * @time 2018/1/9
 * @author ***
 **/

import * as constants from '../constants/demo'

export interface IncrementEnthusiasm {
    type: constants.INCREMENT_ENTHUSIASM;
}

export interface DecrementEnthusiasm {
   
    type: constants.DECREMENT_ENTHUSIASM;
}

export type All= IncrementEnthusiasm | DecrementEnthusiasm;

export function incrementEnthusiasm(): IncrementEnthusiasm {
   
    return {
        type: constants.INCREMENT_ENTHUSIASM
    }
}

export function decrementEnthusiasm