码迷,mamicode.com
首页 > 其他好文 > 详细

第3章 从Flux到Redux

时间:2018-12-23 12:49:30      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:highlight   产生   png   日志   应该   jquer   状态   count   import   

第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派发的动作,根据动作来决定是否要更新应用状态。

 

第3章 从Flux到Redux

标签:highlight   产生   png   日志   应该   jquer   状态   count   import   

原文地址:https://www.cnblogs.com/huyanluanyu/p/10163827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!