构建 F8 2016 App 第三部分：React Native的数据交互
blueberryf
9年前
<p>上一篇： <a href="http://www.open-open.com/lib/view/open1461511458980.html">构建 F8 2016 App 第二部分：设计跨平台App</a> </p> <p>这是为了介绍 React Native 和它的开源生态的一个系列教程，我们将以构建 F8 2016 开发者大会官方应用的 iOS 和 Android 版为主题。</p> <p><a href="/misc/goto?guid=4958536149447001924">React</a> 和 其扩展 <a href="/misc/goto?guid=4958869360442056133">React Native</a>，允许在你构建应用程序，而无需担心你的数据来自哪里，这样你就可以专注于创建应用的UI和逻辑。</p> <p>在<a href="http://www.open-open.com/lib/view/open1461203904422.html">第一章</a>，我们提到如何采用 Parse Server 来持有数据，在 app 中我们将用 Redux 来处理它。在这一部分，我们将解释 Redux 在 React Native 应用中如何工作，以及连接 Parse Server 的简单过程。</p> <p>在我们讨论 Redux 之前，让我们先看看 React 的数据交互是如何创建 Redux 的。</p> <h2>首先，React 应用如何同数据交互？</h2> <p>在MVC应用程序架构中， React 被经常性的视为 ‘View’ 层，但是这样的说法显然欠妥，React 实际上是对 MVC 模式的重新构想。</p> <p>让我们先看下 MVC 架构的基本思想：</p> <ul> <li>模型层就是数据层。</li> <li>视图层负责整个应用程序数据的展现。</li> <li>控制层在应用程序中负责提供数据处理的逻辑操作。</li> </ul> <p>React 可以做到当你创建多个组件组合形成一个视图的时候，每个组件依然可以处理自有逻辑，且只需要提供一个控制器。</p> <pre> <code class="language-javascript">class Example extends React.Component { render() { // Code that renders the view of the existing data, and // potentially a form to trigger changes to that data through // the handleSubmit function } handleSubmit(e) { // Code that modifies the data, like a controller's logic } };</code></pre> <p>在一个 React 应用中，每个组件都有两种不同的数据类型，每一个都有不同的角色：</p> <ul> <li> <p><code>props</code> 当一个组件被创建的时候， <code>props</code> 会被作为参数传递给该组件。如果你有一个按钮，默认的 <code>prop</code> 将会是该按钮的文本。组件并不能改变它们的 props (即它们是不可变的)。</p> </li> <li> <p><code>state</code> 是一种可以被任意组件改变任意次数的数据。如果上面的按钮是登录/注销按钮，那么该 <code>state</code> 将记录用户当前的登录状态，并且该按钮也可以访问它，修改它当用户点击了按钮改变其状态。</p> </li> </ul> <p>为了让 React 应用 减少重复， <code>state</code> 被设计为组件库中的最高级父组件所拥有，即前面提到过的<code>container 组件</code>。换句话说，在上个按钮组件例子中，实际上该按钮并没有拥有该属性，你可以在该按钮的父视图中拥有它，然后使用 <code>props</code> 传递相关的 <code>state</code> 数据给子组件。正因为如此，数据仅仅流向任何给定的应用，这会使得 React 更快和模块化。</p> <p>如果你愿意，你可以从 <code>thinking-in-react</code> 中阅读更多关于制定这些决策的背后想法和原因。</p> <h2>存储状态</h2> <p>为了进一步解释在 React 应用中的数据使用技术， 非死book 推荐了 <code>Flux architecture</code>,该架构是一种模式来实现你的应用，而不是一种实际的框架供你使用。我们不在在你的应用中使用 <code>Flux library</code> ,但是我们会使用 Redux 框架，其源于 Flux architecture，所以让我们深入进去吧。</p> <p>Flux 通过引入 Stores 概念，应用的 <code>state</code> 对象容器，新的工作流用来修改 <code>state</code> 等来扩展 React 的 数据关系：</p> <ul> <li>在 Flux 应用中每个在 Dispatcher 中注册过的 Store 都有一个回调方法。</li> <li>Views (基于 React 组件) 可以触发 Actions ，基本上每个对象，都包含了一堆刚刚发生事情的数据（例如，可能它包括一些将会被输入到应用中的新数据）和 action type (实质上就是 Action 动作的描述类型常量)。</li> <li>Action 被发送到 Dispatcher 。</li> <li>Dispatcher 传递该 Action 到所有 Store 的注册回调。</li> <li>如果 Store 能告知其被一个 Action影响（因为 action 类型和数据相关），其会自动更新，当然其包含的 <code>state</code> 也会被更新。一旦更新，其会发出变化事件。</li> <li>特殊的视图被叫做 Controller Views(container components的优雅术语)将会监听这些变化事件，当其抓获某事件，它们知道应该获取新的 Store 数据。</li> <li>一旦获取到新数据后，它们会调用 <code>setState()</code> ，其会致使在该视图里的组件重新 render 。</li> </ul> <p>你可以看到在 React 应用中 Flux 如何帮助 React 强制执行 one-way flow 策略 ，并且其会使得 React 的数据部分更加优雅和有结构。</p> <p>我们现在不使用 Flux ,所以在这篇文章里不会再有更多该细节，但是如果你想了解更多，这儿有一些在 Flux 网站的<a href="/misc/goto?guid=4959671500313555602">教程</a>可以阅读。</p> <p>所以 Redux 关 Flux 什么事，在我们应用中实际使用框架 Redux 呢？</p> <h2>Flux 到 Redux</h2> <p>Redux 是 Flux 架构的框架实现，但是其也可以剥离开来，react-redux package 提供的 official bindings provided 可以让其和 React 应用更方便的融合。</p> <p>在 Redux 中没有 dispatcher ,并且针对整个应用程序只有一个 Store。</p> <p>在 Redux中，数据流如何工作，在后续我们有更详细的解释，但是这儿我们先介绍几个基本概念：</p> <ul> <li>React 组件可以导致 Actions 被触发，例如按钮的点击。</li> <li>Actions 是一个通过 <code>dispatch</code> 方法 被发送到 Store 的对象（包括一个 <code>type</code> 标签和 Action相关的其他数据）。</li> <li>然后 Store 承载着相关 Action ,同当前 <code>state</code> 树（ <code>state</code> 树是一个单独的对象包含了所有的 <code>state</code> 数据）将其发送到 Reducers。</li> <li>Reducer 是一个纯函数，它维持着之前的状态和动作，然后返回一个基于任何变化的动作的 <code>state</code>。 Redux 应用只能包含一个 Reducer，但是大部分应用最后都会有几个，并且每个都会处理 <code>state</code> 的不同部分（我们将讨论这个）</li> <li>Store 接收到新的 <code>state</code> ，然后替换掉旧的。这里值得注意的是，当我们讨论 <code>state</code> 更新时，这其实是技术上的取代。</li> <li>当 <code>state</code> 发生变化时， Store 触发<a href="/misc/goto?guid=4959671500397096252">变化事件</a>。</li> <li>任何<a href="/misc/goto?guid=4959671500397096252">订阅了该变化事件</a>的 React 组件都会<a href="/misc/goto?guid=4959671500491399416">收到来自 Store 的新 <code>state</code></a>。</li> <li>组件随 <code>state</code> 而更新。</li> </ul> <p>该工作流可以通过下图简单总结：</p> <p>![redux_flowchart](<a href="/misc/goto?guid=4959671500569186643">http://makeitopen.com/static/images/redux_flowchart.png）</a></p> <p>你可以看到数据是如何遵循一个明确的单向通道，没有重叠或相反的方向流动。这也说明 Redux 可以将 app 的每一部分细分。 Store 只关注 <code>state</code> ,视图中的组件只关注展示数据和触发事件， Actions 只关注 <code>state</code> 的变化和其内部的数据。 Reducers 只关注融合旧的 <code>state</code> 和 actions 到新的 <code>state</code> 。当你阅读器源代码并理解它时，你会发现一切都是模块化，优雅和具有明确目的的。</p> <p>Flux 有一些其他的好处：</p> <ul> <li>Actions 是触发 <code>state</code> 改变的唯一方式，且该过程不经过 UI 组件，并且因为 Reducer ，让其很有秩序，远离竞争。</li> <li><code>state</code> 变得不可变，并且有一系列的 <code>state</code> 。每一个都因为代一个独特的变化而被创建。这让你在应用程序中能更简单和清晰的追踪 <code>state</code> 的状态。</li> </ul> <h2>将它们融合在一起</h2> <p>所以现在，我们已经讨论完抽象的数据流，现在让我们来看看我们的 React Native 应用如何使用它们，以及在这个过程中我们学到的东西。</p> <h3>Store</h3> <p><a href="/misc/goto?guid=4959671500657959273">Redux 文档</a> 非常好的解释了如何创建简单的 Store,所以我们将会将设您已经阅读那里的基本知识，并跳过一点点内容，包括 Store 的几个额外参数。</p> <p>Store 的离线同步</p> <p>我们讨论过本地离线存储的必需性，这样应用程序才可以在低信号或无信号条件下工作（在技术会议上尤为重要）。幸运的是，因为我们正在使用 Redux，在我们的 app 中我们可以使用一些很简单的模块，其被叫做 <a href="/misc/goto?guid=4959671500732723190">Redux Persist</a> 。</p> <p>在我们的 Store 中我们也会用到 <a href="/misc/goto?guid=4959671500815860020">中间件</a> ,我们将更多地讨论一些在测试阶段我们用的一些东西。但是总的来说，中间件让你能够在 Action 被分发和到达 Reducer 之前添加一些额外的逻辑操作（这对日志，崩溃报告，异步 APIs 等很有帮助）。</p> <pre> <code class="language-javascript">/* js/store/configureStore.js */ var createF8Store = applyMiddleware(...)(createStore); function configureStore(onComplete: ?() => void) { const store = autoRehydrate()(createF8Store)(reducers); persistStore(store, {storage: AsyncStorage}, onComplete); ... return store; }</code></pre> <p>在这里，嵌套函数的语法可能有些让人迷惑（其中的一些函数返回将另一个函数作为参数），所以在这里扩展下：</p> <pre> <code class="language-javascript">/* js/store/configureStore.js */ // 1 var middlewareWrapper = applyMiddleware(...); // 2 var createF8Store = middlewareWrapper(createStore(reducers)); function configureStore(onComplete: ?() => void) { // 3 const rehydrator = autoRehydrate(); const store = rehydrator(createF8Store); // 4 persistStore(store, {storage: AsyncStorage}, onComplete); ... return store; }</code></pre> <p>在第一行代码中，我们使用 Redux 的 appluMiddleware() 启动中间件（如果你想知道更多，请阅读 <a href="/misc/goto?guid=4959671500897334107">Redux appluMiddleware 文档</a> 该函数用于实例 Store 对象）。</p> <p>所以在第二行代码中，我们我们将 Redux的 createStore() 方法包裹在了 middlewareWrapper . createStore() 方法返回一个 Store 对象 ，middlewareWrapper() 通过中间件扩展它，最终结果保存在 createF8Store 中。</p> <p>然后我们配置我们的 Store 对象。 Persist's autoRehydrate() 是另外一个扩展 Store方法（和 applyMiddleware() 一样，其返回一个函数），我们更新现有的 Store 对象（第三行代码）。 autoRehydrate() 方法事先将一个 Store 对象保存到本地，然后根据 <code>state</code> 自动更新其状态。</p> <p>第四行的 Persist package's persistStore() （我们使用到了 React Native 的 <a href="/misc/goto?guid=4959671500974319464">异步存储系统</a>） 函数是实际的将 app 的 Store 存储到本地。 autoRehydrate() 和 persistStore() 函数就是我们需要离线同步功能的全部代码。</p> <p>现在，不管何时应用程序断开网络连接，Store 最近的副本依然会被存储到本地（包括通过 API 来抓取解析的数据），从用户角度来看，我们的应用仍然可以正常工作。 关于更多信息，你可以阅读 <a href="/misc/goto?guid=4959671501083907875">technical details of how the Redux Persist package works</a> ,但本质上我们已经完成了构建我们的 Store 。</p> <h2>Reduers</h2> <p>在上一节，我们解释了 Redux ,我们也因此引入了一个 Reducer 对象。然而在每个应用中，会有很多个 Reducers 对象。每个对象都对应着 <code>state</code> 的不同部分。举个例子，在一个可评论的应用中，你可能需要一个 reducer 关联到登录状态，其他的关联到其他的评论数据。</p> <p>在 F8 应用中，我们将 reducers 存储在 js/reducers 中。这是 user.js 的简写：</p> <pre> <code class="language-javascript">/* js/reducers/user.js */ ... import type {Action} from '../actions/types'; ... // 1 const initialState = { isLoggedIn: false, hasSkippedLogin: false, sharedSchedule: null, id: null, name: null, }; // 2 function user(state: State = initialState, action: Action): State { // 3 if (action.type === 'LOGGED_IN') { // 6 let {id, name, sharedSchedule} = action.data; if (sharedSchedule === undefined) { sharedSchedule = null; } return { isLoggedIn: true, hasSkippedLogin: false, sharedSchedule, id, name, }; } if (action.type === 'SKIPPED_LOGIN') { return { isLoggedIn: false, hasSkippedLogin: true, sharedSchedule: null, id: null, name: null, }; } // 4 if (action.type === 'LOGGED_OUT') { return initialState; } // 5 if (action.type === 'SET_SHARING') { return { ...state, sharedSchedule: action.enabled, }; } if (action.type === 'RESET_NUXES') { return {...state, sharedSchedule: null}; } return state; } module.exports = user;</code></pre> <p>正如你所知， 这个 reducer 包含了 登录/登出 操作，以及特定的用户参数修改。让我们一点一点分析。</p> <p>注意：在第六段，我们使用了 ES2015 的 destructuring assignment ，其将左边的变量分配给 <code>action.data</code></p> <ol> <li>初始状态</li> </ol> <p>在我们定义初始状态之前，这符合流动式命名习惯（我们将会在 React Native 应用的测试中详细解释）。 <code>initialState</code> 定义了 <code>state</code> 的一部分值，该值被 Reducer 处理，应用会首次加载它或者以前在其上的任何同步存储。</p> <ol> <li>Reducer 方法</li> </ol> <p>然后，我们编写 Reducer 的实例，其实相对来说还是很简单。 <code>state</code> 和 Action (之后我们会讨论) 被作为参数，<code>initialState</code> 作为 <code>state</code> 的默认值（我们将参数使用流式类型注解，同样的，我们会在 React Native 应用的测试部分提到）。然后，我们使用接收到的 Action ,具体为 ‘type’ 标签，返回一个新的改变了的 <code>state</code> 。</p> <p>举个例子，如果第四段的 <code>LOGGED_OUT</code> Action 被分派（由于用户点击了登出按钮），我们将会重置 <code>state</code> 的一部分值为<code>initialState</code> 。 如果第三段 <code>LOGGED_IN</code> Action 发生，你会看到应用将会使用余下数据，返回新的 <code>state</code> ，该 <code>state</code> 和 常规变化例如 <code>isLoggedIn</code>,或者用户输入数据变化 例如 <code>name</code> 都将冲突。</p> <p>还有个方法我们也可以看下，这便是第五段的 <code>SET_SHARING</code> Action 类型。 其非常有趣因为 <code>...state</code> 注解被使用。在 React 中，注解让对象的分配更具兼容性和可读性，并且其会创建一个对象，然后拷贝已经存在的 <code>state</code> ,最后单独更新<code>sharedSchedule</code> 的值。</p> <p>你可以看到 Reducer 的结构是如此的简单和可读 - 定义一个 <code>initialState</code> ，构建一个传入 <code>state</code> 和 Action ,返回一个新的<code>state</code> 的函数。</p> <p>reducers 还有一个大的规则，我们引用 <a href="/misc/goto?guid=4959671501169202831">Redux 文档</a>的内容：</p> <blockquote> <p>"记住，reducer 必须是单纯的。提供相同的参数，其应该计算下一个状态然后返回它。没有意外，没有副作用，没有 API 调用，没有突变，只有计算。"</p> </blockquote> <p>另外一件事需要注意的是：看看 <code>js/reducers/notifications.js</code> ,其有针对 <code>LOGGED_OUT</code> 动作类型的另一个引用。我们之前提到过，但是现在依然需要重复下 - 每一个 reducer 通常是在一个动作被派发后被调用，所以多个 reducers 可能会基于相同的动作来更新不同的 <code>state</code> 。</p> <ul> <li>Actions</li> </ul> <p>让我们仔细看下登录相关的动作，看看它们的代码位置：</p> <pre> <code class="language-javascript">/* from js/actions/login.js */ function skipLogin(): Action { return { type: 'SKIPPED_LOGIN', }; }</code></pre> <p>这是一个简单的Action creator (这个 creator 函数返回的对象实际上是一个 Action)，但是这让你看到了最基本的结构 - 每个动作可以简单的视为一个包含了 <code>type</code> 标签的对象。然后 reducers 可以使用该 <code>type</code> 来更新 <code>state</code> 。</p> <p>同样，我们可以为 <code>type</code> 添加一些数据：</p> <pre> <code class="language-javascript">/* from js/actions/filter.js */ function applyTopicsFilter(topics): Action { return { type: 'APPLY_TOPICS_FILTER', topics, }; }</code></pre> <p>在这儿，动作创造者接收了一个参数，并且将其插入到了动作对象中。</p> <p>然后，我们有一些动作制造者会执行额外的逻辑以及返回 Action 对象。在这个例子中，我们也会使用到一个叫做 ThunkAction 的 动作（<a href="/misc/goto?guid=4959671501244127867">Redux 建议你创建点类似这样的东西来减少模板</a>） - 这种特殊类型的动作制造者返回的是一个函数而不是一个动作。在这种情况下，登出动作制造者返回一个执行一些登出相关的逻辑函数，然后分配到一个 Action 。</p> <pre> <code class="language-javascript">/* from js/actions/login.js */ function logOut(): ThunkAction { return (dispatch) => { Parse.User.logOut(); 非死bookSDK.logout(); ... return dispatch({ type: 'LOGGED_OUT', }); }; }</code></pre> <p>(注意，在这个例子中，我们也会使用到 <a href="/misc/goto?guid=4959669806376498579">Arrow function</a> 语法)</p> <h3>异步动作</h3> <p>举个例子，如果你同任何 APIs 交互，你需要一些异步的动作制造者。 Redux 在这方面有个相当复杂的方式来实现异步，但是由于我们在使用 React Native , 我们可以使用到 ES7 的 <code>await</code> 函数，这极大简化了异步过程：</p> <pre> <code class="language-javascript">/* from js/actions/config.js */ async function loadConfig(): Promise<Action> { const config = await Parse.Config.get(); return { type: 'LOADED_CONFIG', config, }; }</code></pre> <p>在这里，我们使用 一个 API 调用去解析去抓取一些应用程序的配置参数。任何像这样的 API 调用获取网络资源都需要耗费一定的时间。动作不会被立即分配，动作创造者首先等待 API 调用的结果，然后一旦数据有效，动作对象（负载着 API 数据）会被立即返回。</p> <p>其异步调用的一个好处是，由于我们在等待 Parse.Config 调用的结果，其他的异步操作可以做其自己的工作，这样我们可以同时又多个操作，其会自动提高效率。</p> <h2>绑定到组件</h2> <p>现在，在我们应用的 setup 函数中链接 Redux 逻辑到 React ：</p> <pre> <code class="language-javascript">/* from js/setup.js */ function setup(): React.Component { // ... other setup logic class Root extends React.Component { constructor() { super(); this.state = { isLoading: true, store: configureStore(() => this.setState({isLoading: false})), }; } render() { if (this.state.isLoading) { return null; } return ( // 1 <Provider store={this.state.store}> <F8App /> </Provider> ); } } return Root; }</code></pre> <p>我们使用官方的 <a href="/misc/goto?guid=4959667622935709912">React 和 Redux 绑定</a>, 因此我们可以使用 <a href="/misc/goto?guid=4959671501382962768">组件</a> 。 这个 Provider 让我们的 Store 可以和任何我们创建的组件通信：</p> <pre> <code class="language-javascript">/* from js/F8App.js */ var F8App = React.createClass({ ... }) // 1 function select(state) { return { notifications: state.notifications, isLoggedIn: state.user.isLoggedIn || state.user.hasSkippedLogin, }; } // 2 module.exports = connect(select)(F8App);</code></pre> <p>在上面，我们展示了一部分 组件的代码 - 我们整个应用的父组件。</p> <p>上面第一个方被用来获取 Redux Store，然后从中获取一些数据，针对我们的 <code><F8App></code> 组件插入到 <code>props</code>。在这种情况下，我们希望通知的数据和用户登录状态的数据成为组件的 <code>props</code>，这样其会根据每一次 Store 的改变而更新状态。</p> <p>我们可以使用 React-Redux 的 <a href="/misc/goto?guid=4959671501474108319"><code>connect()</code> 方法</a>来实现它 - <code>connect()</code> 有一个参数叫做 <a href="/misc/goto?guid=4959671501556320102"><code>mapStateToProps</code></a>，其会负载一个方法，当一个 Store 更新，该方法就会被调用。</p> <p>所以当我们应用的 Store 更新时，<code>select()</code> 将会和被作为参数的新 <code>state</code> 一起被调用。<code>select()</code>返回一个包含了我们想从新<code>state</code>中获取的数据（自在这个例子中，是<code>notifications</code>和<code>isLoggedIn</code>）,然后 第二段的<code>connect()</code> 融合数据到 <code><F8App></code> 组件的 <code>props</code>。</p> <pre> <code class="language-javascript">/* from js/F8App.js */ var F8App = React.createClass({ ... componentDidMount: function() { ... // 1 if (this.props.notifications.enabled && !this.props.notifications.registered) { ... } ... }, ... })</code></pre> <p>现在我们有个 <code><F8App></code> 组件，当任何新的已经通过 <code>select()</code> 方法订阅了的 <code>state</code>数据，都会被更新，其可以通过我们的 props 访问。但是我们如何从一个组件里分派动作？</p> <h3>从组件中分派动作</h3> <p>为了知道我们如何连接动作到组件，让我们看看 <code><GeneralScheduleView></code> 相关部分：</p> <pre> <code class="language-javascript">/* from js/tabs/schedule/GeneralScheduleView.js */ class GeneralScheduleView extends React.Component { props: Props; constructor(props) { super(props); this.renderStickyHeader = this.renderStickyHeader.bind(this); ... this.switchDay = this.switchDay.bind(this); } render() { return ( <ListContainer title="Schedule" backgroundImage={require('./img/schedule-background.png')} backgroundShift={this.props.day - 1} backgroundColor={'#5597B8'} data={this.props.data} renderStickyHeader={this.renderStickyHeader} ... /> ); } ... renderStickyHeader() { return ( <View> <F8SegmentedControl values={['Day 1', 'Day 2']} selectedIndex={this.props.day - 1} selectionColor="#51CDDA" onChange={this.switchDay} /> ... </View> ); } ... switchDay(page) { this.props.switchDay(page + 1); } } // 1 module.exports = GeneralScheduleView;</code></pre> <p>同样，这段代码已经为了便于学习很大程度上简化了，但是我们现在可以在第一段添加和修改一些代码来连接这个 容器组件到 Redux store：</p> <pre> <code class="language-javascript">/* from js/tabs/schedule/GeneralScheduleView.js */ function select(store) { return { day: store.navigation.day, data: data(store), }; } function actions(dispatch) { return { switchDay: (day) => dispatch(switchDay(day)), } } module.exports = connect(select, actions)(GeneralScheduleView); </code></pre> <p>这一次有一些不同 - 我们提供了 React-Redux 的 <code>connect()</code> 方法。总的来说，执行 <code>actions()</code> 内部的动作创造者到组件的 props,然后将其包裹在 <code>dispatch()</code>方法，这样它们才能立即分发一个 Action 。</p> <h3>如何工作</h3> <p>让我们看看实际的组件:</p> <p><img alt="" src="https://simg.open-open.com/show/dfc978c2165071c0200a73a1e3a2f929.png"></p> <p>利用 ’Day 1' 在 <code>renderStickyHeader()</code> 中触发 <code>onChange</code> 事件，然后在组件内部的 <code>switchDay()</code> 方法被调用，该方法分发<code>this.props.switchDay()</code> 动作创造者。在我们的动作文件内，我们可以看到这样一个动作创造者：</p> <pre> <code class="language-javascript"> /* from js/actions/index.js */ switchDay: (day): Action => ({ type: 'SWITCH_DAY', day, })</code></pre> <p>在导航 Reducer 内部，我们可以看到一个修改的 <code>day</code> 值产生一个新的 <code>state</code> 树：</p> <pre> <code class="language-javascript">/* from js/reducers/navigation.js */ if (action.type === 'SWITCH_DAY') { return {...state, day: action.day}; }</code></pre> <p>这个 Reducer（以及任何其他那些可能监视 <code>SWITCH_DAY</code> 动作的 Reducers ）返回新的 <code>state</code> 到 Store中，其更新自己并且发送一个改变事件。</p> <p>而由于通过连接 <code><GeneralScheduleView></code> 连接到 Redux Store,我们还订阅了 Store 的变化状态。</p> <h2>什么是解析服务器</h2> <p>在这个教程中，你希望你能够获取到大量新的信息，所以让我们快速展示我们如何连接 React Native 应用到我们的解析服务器数据后端，以及相关 API:</p> <pre> <code class="language-javascript">Parse.initialize( 'PARSE_APP_ID', 'PARSE_JAVASCRIPT_KEY' ); Parse.serverURL = 'http://exampleparseserver.com:1337/parse'</code></pre> <p>就这样，在 React Native 中我们通过 解析 API 建立连接。</p> <p>是的，因为我们现在使用的是 <a href="/misc/goto?guid=4959671309907303297">Parse + React</a> SDK ,我们有非常简单的SDK接入。</p> <h3>解析和动作</h3> <p>当然，我们希望能够查询（例如，在我们的Actions中）......很多的查询。对于那些动作创造者来说没什么特别的，它们是我们之前提到的相同的异步操作。然而，因为有非常多的简单的 Parse API 查询需要初始化应用，我们想大量减少样板。在我们的基本动作文件中，我们创建基本的动作构建者：</p> <pre> <code class="language-javascript">/* from js/actions/index.js */ function loadParseQuery(type: string, query: Parse.Query): ThunkAction { return (dispatch) => { return query.find({ success: (list) => dispatch(({type, list}: any)), error: logError, }); }; }</code></pre> <p>然后我们就可以简单的多次复用该代码：</p> <pre> <code class="language-javascript">loadMaps: (): ThunkAction => loadParseQuery('LOADED_MAPS', new Parse.Query(Maps)),</code></pre> <p><code>loadMaps()</code> 变成了一个动作创建器，其将会运行一个简单的解析查询针对所有存储的地图数据，然后将其单独传递当查询结束时。<code>loadMaps()</code> 以及其他解析数据操作的动作可以在整个应用的 <code>componentDidMount（）</code> 方法中找到，这意味着当应用第一次打开时，其需要拉去所有的解析数据。</p> <h3>解析和 Reducers</h3> <p>我们已经减少了重复的动作，但是同时我们也想减少在我们 Reducers 内部的模板。这些模板将会从 动作负载中收到一些解析 API 的数据，并且必须将其映射到 <code>state</code>。我们针对解析数据创建单个基本 Reducer ：</p> <pre> <code class="language-javascript">/* from js/reducers/createParseReducer.js */ function createParseReducer<T>( type: string, convert: Convert<T> ): Reducer<T> { return function(state: ?Array<T>, action: Action): Array<T> { if (action.type === type) { // Flow can't guarantee {type, list} is a valid action return (action: any).list.map(convert); } return state || []; }; }</code></pre> <p>这是个简单的 Reducer (有大量流式类型注解)，但是让我们看看其如何同基于关闭它的子 Reducers工作。</p> <pre> <code class="language-javascript">/* from js/reducers/faqs.js */ const createParseReducer = require('./createParseReducer'); export type FAQ = { id: string; question: string; answer: string; }; function fromParseObject(map: Object): FAQ { return { id: map.id, question: map.get('question'), answer: map.get('answer'), }; } module.exports = createParseReducer('LOADED_FAQS', fromParseObject); </code></pre> <p>所以不用每次去重复创建一份 <code>createParseReducer</code> 代码，我们只需要简单的传递一个对象给基本的 Reducer ，其会将 API 数据映射到我们的 <code>state</code> 上。</p> <p>现在，我们的应用，拥有一个结构良好且易于理解的数据流，可以连接到我们的解析服务器，甚至能够离线同步我们的 Store 到本地存储。</p> <p>下一篇：<a href="http://www.open-open.com/lib/view/open1461568900024.html">构建 F8 2016 App （四）：测试</a></p> <p>来源：<a href="/misc/goto?guid=4959671501676693064">pockry</a></p>