第3章 从Flux到Redux

Posted 2021-01-29 huyanluanyu

第3章 从Flux到Redux

3.1 Flux

单向数据流，React是用来替换Jquery的，Flux是以替换Backbone.js、Ember.js等MVC框架为主的。

 

一个Flux应用包含四个部分：

Dispatcher，处理动作分发，维持Stror之间的关系；

Store，负责存储数据和处理数据相关逻辑；

Action，驱动dispatcher和javascript对象；

View，视图部分，负责显示用户界面。

如果非要把Flux 和MVC 做一个结构对比，那么， Flux 的Dispatcher 相当于MVC 的Controller, Flux 的Store 相当于MVC 的Model, Flux 的View 当然就对应MVC 的View了，至于多出来的这个Action ，可以理解为对应给MVC 框架的用户请求。

Flux应用实例：

1、Dispatcher

　　首先创造一个Dispatcher，Dispatcher的作用就是派发action，几乎所有应用都只需拥有一个Dispathcer，在src下创造一个唯一的Dispatcher对象

import {Dispatcher} from ‘flux‘

export default new Dispacther()

2、Action

　　代表一个动作，一个纯粹的数据对象。

　　action对象必须有一个名为type的字段，代表这个action对象的类型，为了记录日志和debug方便，这个type应该是字符串类型。

　　定义action通常需要两个文件，一个定义action类型，一个定义actio的构造函数（也称为action creator）。原因是store会根据action不同类型做不同操作。

　　在src/Actiontypes.js中，定义action的类型

//两个action类型 INCREMENT和DECREMENT，一个是点击+按扭，一个是点击-按扭
export const INCREMENT = ‘increment‘
export const DECREMENT = ‘decrement‘

　　在src/Action.js中，定义action的构造函数，这里边定义的并不是action对象本身，而是能够产生并派发action对象的函数。

//引入ActionTypes和AppDispatcher，直接使用Dispatcher
import * as ActionTypes from ‘./ActionTypes‘
import AppDispatcher from ‘./AppDispatcher‘

//Action.js导出了两个action的构造函数increment和decrement，当这两个构造函数被调用的时候，创造了对象的action对象，并立即通过AppDispatcher.dispatch函数派发出去。
export const increment = (counterCaption) => {
    AppDispatcher.dispatch({
        type: ActionTypes.INCREMENT,
        counterCaption: counterCaption
    })
}

export const decrement = (counterCaption) => {
    AppDispatcher.dispatch({
        type: ActionTypes.DECREMENT,
        counterCaption: counterCaption
    })
}

3、Store

　　一个Store也是一个对象，这个对象存储应用状态，同时还要接受Dispatcher派发的动作，根据动作来决定是否要更新应用状态。