Flux For Beginners(翻译)

6 min read
# 学习# 翻译

原文地址

好手段!我在 Atlas 的 Facebook 工作,使用 React+Flux 的架构大概一年半了。根据我的经验做一些回答:

1、如何从服务器获取和保存数据呢?

保存数据:Action creator 会异步调用服务,并且会广播一个 success 或者 failure 的事件。然后 Store 会响应对应的 action 。你也可以在调用前广播一个 action 用来做一些更新。

加载数据:当你调用 store 去获取数据的时候,它(store)会在后台获取数据,并且在更新好对应的响应之后发送通知。Store 可以是同步的,如果数据不可取,getBlah() 会返回 null ,也可以是异步的,当数据有返回的时候,getBlah() 返回 resolved 的 Promise,这样对你来说是很 nice 的。

2、如何处理没有共同 parent 的 component 之间的通讯?

Suciu Vlad nailed this one.(没看懂)。当 Stores 和 Actions 成为全局变量的时候,他们就是不同 components 之间的交互点。

3、要使用什么样的 events 库呢?这是个问题吗?

不要在意细节。如果你使用 browserify,EventEmitter 会很好用。有一件事情你要考虑好的:你的 store 的事件广播是单一的(例如对任何事情 emit 同一个的 change 事件),还是混合的(例如 change 事件包含了哪些数据做了改变的信息,这样你可以决定忽略那些你不需要处理的事件)

4、为什么 Facebook 不把他们都打包一起发布呢?

你已经看过[1]了,这基本上就是你需要的 Flux 了。对于 NuclearMail[2],那是非常容易地使用原生 JS 去填充部件(原文:it was quite easy to just using plain old JS to fill in the pieces.)。例如,action creator 调用 dispatcher [3],或者一个 BaseStore class 封装 EventEmitter [4] 。其中一件你提到的事,你应该从 store 拉去数据,并且把数据放进 state 。我打算在这周(六个月前的吧)讲讲关于 Flux Panel 在 ReactJS 中的一些困扰(Conf),我们将会很快理清它并发布一个碉堡(awesome)的 helper ,叫 DependentStateMixin(一个粗糙的版本[5] 和一些例子[6])

  1. https://github.com/facebook/flux
  2. https://github.com/ianobermiller/nuclearmail
  3. https://github.com/ianobermiller/nuclearmail/blob/master/src/js/ThreadActions.js
  4. https://github.com/ianobermiller/nuclearmail/blob/master/src/js/BaseStore.js
  5. https://github.com/ianobermiller/nuclearmail/blob/master/src/js/DependentStateMixin.js
  6. https://github.com/ianobermiller/nuclearmail/blob/21c4f2c6ccd7937a8be85e3bf35e47ed29f9ee91/src/js/App.js#L37-L70

5、我应该用类似 Backbone 的 model 作为 store 的model吗?

如果你用 Flux ,没有任何必要做这个。当数据发生改变的时候,你只需要广播一下通知就好了。你应该尽量保证你的 store 数据的稳定,与 PureRenderMixin 结合,这样会让一切很快很酷炫。我们几乎使用原生 JS 的对象和数组,并且调用 Object.freeze 去冻结那些属性(为了速度,可以在成品中设置成 Disabled 的属性)。你也可以用那些酷炫的 JS 库 https://github.com/facebook/immutable-js) (坑爹的有几个都打不开)

Table of Contents