[译]Flux入门

凌燕 2019-06-29

原文地址:https://blog.andrewray.me/flu... ,作者:Andrew Ray

TL;DR 当我在努力学习Flux时,我希望有人告诉我:它并不简单,也没有好的文档可以查,并且有许多变化的部分。

我需要使用Flux吗?

如果你的应用程序需要处理动态数据(dynamic data)的话,那么答案就是yes,你可能需要使用Flux。

如果你的应用程序仅仅是无需共享状态静态视图(static view),并且你从不保存也不更新数据,那么你不需要使用Flux,Flux不会给你带来任何好处。

为什么是Flux?

皮一下,因为Flux是个适度复杂的主意,为啥要增加复杂度呢?

90%的iOS应用程序是表格视图中的数据。iOS工具包具有良好定义的视图和数据模型可以让应用开发变得简单。

但是在前端(Font End:HTML,JS,CSS),我们甚至都没有。相反,我们遇到一个很大的问题:没有人知道应该如何去构建一个前端应用。我从事这个行业多年,从来没人教给我“最佳实践”,相反,他们教了我好多“库(libraries)”,诸如jQuery,Angular,Backbone等等。但是真正的问题、数据流,仍然避开了我们。

什么是Flux?

Flux是一个用来描述具有非常特定事件和监听的“单向”数据流的词。没有官方的Flux库,但是你需要Flux Dispatcher和任何的JavaScript event library

官方文档写的就像某人的意识流一样,从这里开始学习是不太好的。但是一旦你掌握了Flux,它可以帮助你填补空白。

不要试图把Flux同MVC架构进行比较,它们的相似之处只会令人困惑。

正式入坑!我将按顺序解释概念,并且一个一个地构建它们。

1.视图的“Dispatch”和“Actions”

Dispatcher(调度员)本质上是一个加入了额外规则的事件系统。它来广播事件并注册回调。全局的dispatcher只有唯一的一个,你应该使用Facebook Dispatcher Library。实例化非常容易:

var AppDispatcher = new Dispatcher();

假设你的应用程序有一个“新建”按钮来向列表添加项目。

<button onClick={ this.createNewItem }>New Item</button>

点击会发生什么?你的视图会调度一个非常具体的“操作”,其中包含操作名称和新项目数据:

createNewItem: function( evt ) {

    AppDispatcher.dispatch({
        actionName: 'new-item',
        newItem: { name: 'Marco' } // example data
    });

}

action”是Facebook创造的另一个词。它是一个JavaScript对象,用以描述我们想要做什么事情,以及做这件事我们需要的数据。正如你所见到的,我们要做的事情就是添加一个new-item,我们需要的数据就是项目name

2."Store"响应调度的操作

像Flux一样,“Store”这个词也是Facebook创造的.对于我们的应用程序,我们需要列表的特定逻辑和数据集合。这描述了我们的Store,我们称之为ListStore。

Store是一个单体对象,意味着你可能不能通过“new”关键字来声明它,应用程序中每个Store里只有一个实例。

// Single object representing list data and logic
var ListStore = {

    // Actual collection of model data
    items: []

};

然后,Store会响应已分派的操作:

var ListStore = …

// Tell the dispatcher we want to listen for *any*
// dispatched events
AppDispatcher.register( function( payload ) {

    switch( payload.actionName ) {

        // Do we know how to handle this action?
        case 'new-item':

            // We get to mutate data!
            ListStore.items.push( payload.newItem );
            break;

    }

});

这是Flux处理调度回调的传统方式。每个payload包含一个action的名称(actionName)和数据(newItem),switch语句确定Store是否应该响应action,并且知道根据action的类型处理数据变化。

相关推荐