React快速上手开发

Flux

｜

167

虽然

schema

对象是按照原样传递的，但是数据看似并非如此。

<Whinepad>

组件接收到

initialData

属性后，会对数据进行某些修改再传递给

<Excel>

组件（传递的属性是

this.

state.data

而不是

this.props.initialData

）。这里会产生两个问题：如果新的数据不同于

原有数据，会发生什么？当提及最新的数据时，到底哪个组件拥有“单一数据源”？

在上一章的实现中，虽然顶层

<Whinepad>

组件确实包含了最新的数据，但这并没有明确为

什么

UI

组件（

React

是完全和

UI

相关的）应该掌握数据的来源。

接下来介绍如何把这项工作移交给

Store

进行处理。

8.3

　

Store

首先复制一份现有的代码：

$ cd ~/reactbook

$ cp -r whinepad2 whinepad3

$ cd whinepad3

$ npm run watch

接下来，创建一个新目录用于放置

Flux

模块（以便与

React

的

UI

组件区分开）。目前只需

创建

Store

和

Actions

两个模块：

$ mkdir js/source/flux

$ touch js/source/flux/CRUDStore.js

$ touch js/source/flux/CRUDActions.js

Flux

架构允许你创建多个

Store

（比如一个关于用户数据，另一个关于应用设置等），但目

前我们只关注单个

CRUD Store

的情况。这个

Store

全权负责处理一个记录列表；在这个例

子中，是关于酒类及其评价的记录。 ...