浅谈Flux架构及Redux实践

Flux概述

创新互联是一家集网站建设,萍乡企业网站建设,萍乡品牌网站建设,网站定制,萍乡网站建设报价,网络营销,网络优化,萍乡网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

Flux是Facebook用来构建用户端的Web应用程序的体系架构，与其它形式化的框架相比，它更像是一个架构思想，用于管理和控制应用中数据的流向。这里应用中的数据指包括但不限于来自服务端的数据页面中view的一些状态(如一个面板是展开还是关闭)，临时存储在本地需要持久化到服务端的数据等。

好了，说了这么多好像还是一脸懵逼，不慌，接下来看看展开式。

 MVC

在讲述Flux之前，我们看看之前传统的MVC架构以及在前端中的一些问题继而思考Flux带来的改变。MVC(Model-View-Controller)***兴起于后端，通过对应用程序复杂度的简化使程序更加直观和便于维护。后端程序MVC中View可以看为数据的呈现，Model为数据的模型，Controller作为程序的流程控制。现在假设有这样的场景，用户想查看自己的profile页面，可能会有这样的流程：在页面上点击profile按钮，接下来就是一个HTTP请求(/profile?username=jiavan) => Controller接收到这一请求并获得请求的内容username=jiavan然后告知Model需要jiavan的数据 => Model返回了jiavan的数据 => Controller得到数据返回新的视图，看下流程：

 现在前端中又有这样的场景：切换Menu中的Item，当前选中的Item颜色不同于其它颜色并且底部显示对应Item的内容。一般情况下我们会定义一个css class来作为当前选中Item的样式。当用户点击Item_A为被点击的元素新增高亮的class，其它兄弟元素移除该样式，这里的事件响应函数就是Controller，我们会在这里处理样式修改逻辑，以及更新Model的数据，然后新的数据及样式重新渲染界面。这种VC<->M的形式在关系比较简单的情况下是比较清晰容易控制的，但是复杂的页面上这样的模式可能会变得非常混乱：

 之所以变得混乱了，因为很多view都具备修改多个model的能力，这里的单个修改行为可以称之为一个Action，一个Action的产生可能是用户行为，或者一个Ajax请求需要渲染新界面。对比上面后端传统MVC模式可以发现：

  • 后端中Action作为一个URL请求，前端中可能是一个事件;
  • 后端中Action处理被集中在Controller中，而前端中是分散的。

那么是不是可以把前端中修改状态即state的行为(事件回调/Ajax)全部抽象成一种Action描述，然后交付到一处即Reducers来进行原子化处理，然后Reducer修改整个应用中唯一的一棵state tree即Store，***通过state->view的机制来重新渲染?

Flux数据流框架

上面提到的几个概念已经对Flux有了初步的了解，下面进入正题。相信有了解Flux的都应该看过下面这张著名的数据流图：

  1. Action可以看成是修改Store的行为抽象;
  2. Dispatcher管理着应用的数据流，可以看为Action到Store的分发器;
  3. Store管理着整个应用的状态和逻辑，类似MVC中的Model。

所以Flux可以被看作传统MVC的改进而非颠覆，当我***次看到Flux的时候其实是比较懵逼，但看到并使用了Redux后确实有一种非常惊艳的感觉。

Redux

按照Redux官方的描述Redux is a predictable state container for JavaScript apps.，其中predictable和state container体现了它的作用。那么如何来理解可预测化的呢?这里会有一些函数式编程方面的思想，在Redux中reducer函数是一个纯函数，相同输入一定会是一致的输出，所以确定输入的state那么reducer函数输出的state一定是可以被预测的，因为它只会进行单纯的计算，保证正确的输出。状态容器又是什么?说明Redux有一个专门管理state的地方，就是Store，并且一般情况下是唯一的，应用中所有state形成的一颗状态树就是Store。Redux由Flux演变而来，但受 Elm 的启发，避开了 Flux 的复杂性，我们看看其数据流向：

 不同于Flux架构，Redux中没有dispatcher这个概念，并且Redux设想你永远不会变动你的数据，你应该在reducer中返回新的对象来作为应用的新状态。但是它们都可以用(state, action) => newState来表述其核心思想，所以Redux可以被看成是Flux思想的一种实现，但是在细节上会有一些差异。

重要概念

  1. 应用中的所有state都以一个object tree的形式存储在一个单一的store中;
  2. 唯一能改store的方法是触发action，action是动作行为的抽象;
  3. 为了描述action如何改变state树，需要编写reducer函数。

这里需要说明一点的是reducer函数，它应当是一个纯函数，不应该有副作用，不应有API调用，Date.now()或者随机获取等不稳定的操作，应当保证相同的输入reducer计算的结果应该是一致的输出，它只会进行单纯的计算。编写reducer函数也是Redux中比较重要的一块，它的形式如下：

 
 
      
  
  1. function testReducer(state, action) { 
    2.   
  
  2.   switch (action.type) { 
    3.   
  
  3.     case ACTION_TYPE: 
    4.   
  
  4.       // calc... 
    5.   
  
  5.       return newState; 
    6.   
  
  6.     default: return state; 
    7.   
  
  7.   } 
    8.   
  
  8.   return newState; 
    9.   
  
  9. }  
    10.

state是不可修改的，所以返回的新state应该是基于输入state副本的修改，而不是直接修改state后的返回。

原则

1. 单一数据源，store

整个应用的state被存放在一棵Object tree中，并且这个Object tree只存在唯一一个store中;

2. state是只读的

唯一能改变state的方法是触发action，action是对已经发生了的事情的抽象描述，简单的讲，它把行为抽象成了一个对象。

比如，删除一条记录的action可以抽象的理解为：

 
 
      
  
  1. { 
    2.   
  
  2.   type: 'DELETE_ITEM', 
    3.   
  
  3.   index: 1, 
    4.   
  
  4. }  
    5.

3. 使用纯函数来实现state归并操作，reducer

传入待修改的state和一个告知reducer如何修改state的action，reducer将返回action规则对应下操作后的新的state。

reducer(state, action) => new state

数据流

严格的单向数据流是Redux设计的核心

Redux应用数据的生命周期遵循下面4个步骤：

  1. 调用store.dispatch(action), 可以在任何地方进行;
  2. Redux store调用传入的reducer函数，并且将当前的state树与action传入。reducer是纯函数，只用于计算下一个state，它应该是完全可被预测的，相同的输入必定会有相同的输出，不能有副作用的操作，如API的调用或者路由跳转，这些应该都是在dispatch前产生;
  3. 根reducer将多个子reducer输出合并成一个单一的state树;
  4. Redux store保存了根reducer返回的完整的state树。
    新的state树就是应用的下一个状态，现在就可以根据新的state tree来渲染UI。

Redux实践

我们通过一个非常简单的计数器demo来梳理Redux的数据流。

0x00. 创建action

action其实就是一个普通的对象，只是对行为的抽象描述，这里我们可以把加上一个数描述为：

 
 
      
  
  1. { 
    2.   
  
  2.   type: INCREMENT, //该动作的抽象描述 
    3.   
  
  3.   number, // 该动作携带的数据 
    4.   
  
  4. }  
    5.

更多的时候我们会通过一个action生成函数来得到一个action：

 
 
      
  
  1. function incrementCreator(number) { 
    2.   
  
  2.   return { 
    3.   
  
  3.     type: INCREMENT, 
    4.   
  
  4.     number, 
    5.   
  
  5.   }; 
    6.   
  
  6. }  
    7.

0x01. 创建reducer函数

reducer作为整个Redux中action的处理中枢，接收state与action并对此修改数据，返回应用的下一个状态。

 
 
      
  
  1. function countReducer(state, action) { 
    2.   
  
  2.   switch (action.type) { 
    3.   
  
  3.     case INCREMENT: 
    4.   
  
  4.       return Object.assign({}, { 
    5.   
  
  5.         counter: state.counter + action.number, 
    6.   
  
  6.       }); 
    7.   
  
  7.     case DECREMENT: 
    8.   
  
  8.       return Object.assign({}, { 
    9.   
  
  9.         counter: state.counter - action.number, 
    10.   
  
  10.       }); 
    11.   
  
  11.     default: return state; 
    12.   
  
  12.   } 
    13.   
  
  13. }  
    14.

注意：上面我们已经提到多次，state是不可修改的，所以通过assign归并我们对数据的操作，返回的是state副本修改后的对象，并非直接修改了输入的state。

0x02. 创建唯一store

通过Redux中的createStore方法传入reducer函数来创建整个应用的store。

 
 
      
  
  1. const store = createStore(countReducer); 
    2.

0x03. 修改state

通过store的dispatch方法来发起一个action。

 
 
      
  
  1. store.dispatch(incrementCreator(5)); 
    2.   
  
  2.  
    3.   
  
  3. store.dispatch(decrementCreator(4));  
    4.

完整demo

 
 
      
  
  1. import { createStore } from 'redux'; 
    2.   
  
  2.  
    3.   
  
  3. // actions 
    4.   
  
  4. const INCREMENT = 'INCREMENT'; 
    5.   
  
  5. const DECREMENT = 'DECREMENT'; 
    6.   
  
  6.  
    7.   
  
  7. // actionCreator，可以视为创建action的语法糖 
    8.   
  
  8. function incrementCreator(number) { 
    9.   
  
  9.   return { 
    10.   
  
  10.     type: INCREMENT, 
    11.   
  
  11.     number, 
    12.   
  
  12.   }; 
    13.   
  
  13. } 
    14.   
  
  14.  
    15.   
  
  15. function decrementCreator(number) { 
    16.   
  
  16.   return { 
    17.   
  
  17.     type: DECREMENT, 
    18.   
  
  18.     number, 
    19.   
  
  19.   }; 
    20.   
  
  20. } 
    21.   
  
  21.  
    22.   
  
  22. // 初始化state 
    23.   
  
  23. const initialState = { 
    24.   
  
  24.   counter: 0, 
    25.   
  
  25. }; 
    26.   
  
  26.  
    27.   
  
  27. // reducers函数，注意***一定要return state防止不能匹配到action的时候state丢失 
    28.   
  
  28. function countReducer(state = initialState, action) { 
    29.   
  
  29.   switch (action.type) { 
    30.   
  
  30.     case INCREMENT: 
    31.   
  
  31.       return Object.assign({}, { 
    32.   
  
  32.         counter: state.counter + action.number, 
    33.   
  
  33.       }); 
    34.   
  
  34.     case DECREMENT: 
    35.   
  
  35.       return Object.assign({}, { 
    36.   
  
  36.         counter: state.counter - action.number, 
    37.   
  
  37.       }); 
    38.   
  
  38.     default: return state; 
    39.   
  
  39.   } 
    40.   
  
  40. } 
    41.   
  
  41.  
    42.   
  
  42. // 创建store 
    43.   
  
  43. const store = createStore(countReducer); 
    44.   
  
  44.  
    45.   
  
  45. // 订阅store的修改 
    46.   
  
  46. const unsubscribe = store.subscribe(function log() { 
    47.   
  
  47.   console.log(store.getState()); 
    48.   
  
  48. }); 
    49.   
  
  49.  
    50.   
  
  50. // 通过dispatch action来改变state 
    51.   
  
  51. store.dispatch(incrementCreator(5)); //Object {counter: 5} 
    52.   
  
  52. store.dispatch(decrementCreator(4)); //Object {counter: 1} 
    53.   
  
  53.  
    54.   
  
  54. // 取消订阅 
    55.   
  
  55. unsubscribe();  
    56.

本文标题：浅谈Flux架构及Redux实践
URL网址：http://www.gawzjz.com/qtweb2/news17/19167.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸建站知识

各行业网站

成都网站制作　　 　东方电机技改服务有限公司　　 　移动手机网站制作　　 　四川电信机房托管　　 　成都app开发公司　　 　响应式建站　　 　成都做手机网站　　 　手机网站版本　　 　广安网站设计　　 　重庆网站建设　　 　关键词排名　　 　背发光字　　 　瑞杰企业管理　　 　手机网站制作　　 　网站制作　　 　成都微信开发　　 　江安网站建设　　 　成都宣传画册设计　　 　成都光华机房服务器托管　　 　都江堰做网站