首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

Redux 简介-2

Redux 简介-2

数据流使用 Redux store.dispatch() 函数分派操作时,Redux        将该操作和当前状态一起传递给应用程序的缩减程序。缩减程序创建一个新状态并返回给 Redux。图 2 描绘了该数据流。
图 2. Redux 数据流
在图 2 中,操作首先调用示意图右下角的 Redux.dispatch()。Redux        分派器将操作分配给应用程序的缩减程序,并将当前状态和操作传递给缩减程序。缩减程序创建新状态并返回给 Redux。最后,Redux        向所有视图组件告知状态已更改,这将导致应用程序被重绘。Redux 通过特定于框架的绑定向视图组件(比如 React 或 Angular 组件)告知状态更改。
Redux API整个 Redux API 很简单,仅包含 5 个顶级函数(您已经知道其中一个函数 Redux.createStore()):
  • Object createStore(reducer, initialState) - 创建 Redux          存储。
  • Object combineReducers(reducers) - 将多个缩减程序组合为一个。
  • Object compose(...functions) - 从左向右构造函数。
  • void applyMiddleware(...middlewares) - 应用 Redux 中间件。
  • Object bindActionCreators(actionCreators, dispatch) -          将多个操作创建器绑定到分派函数。
回想一下,Redux          维护着单一缩减程序的引用,该缩减程序负责计算应用程序的整体状态。但在复杂应用程序中维护单个缩减程序函数可能不太实用,尤其是在开发团队协同工作时。顾名思义,combineReducers()        函数将多个缩减程序函数组合为一个。然后,您可以控制缩减程序函数的精细水平,各个开发人员可以独立处理这些函数。
借助 Redux applyMiddleware() 函数,可以通过拦截分派调用的中间件来扩展        Redux。这个方便的工具使实现各种各样的横切关注点成为可能,从日志记录到异步操作。
在下一期中将会看到,Redux 支持操作创建器— 创建操作的函数。bindActionCreators() 函数将操作创建器绑定到 Redux dispatch()        函数,使构造操作创建器变得很容易。
您已经看到,createStore() 函数根据应用程序的缩减程序来创建 Redux 存储。请注意,也可以向          createStore() 函数传递初始应用程序状态。拥有存储的引用后,可以调用对象的方法:
  • Object getState() 返回应用程序的当前状态。
  • void dispatch(Objectaction) 分派一个操作,触发一次状态更改。
  • replaceReducer(nextReducer) 替换状态树的缩减程序。
  • subscribe(Functioncallback) 导致 Redux 调用每次分派的回调方法。
Redux API 就是如此简单。
结合使用 Redux 和 React现在您已经知道了如何在没有框架的情况下使用 Redux,已为学习如何将它与 React 结合使用做好了准备。
图 3 中所示的交通信号灯应用程序使用与前一个版本相同的状态、缩减程序和操作 — 但在本例中它是一个 React 应用程序。
图 3. 一个交通信号灯
该应用程序表示美国的一处交通信号灯。当信号灯为绿色时,如图 3 中顶部图片中所示,唯一可能的下一个状态是 Caution,所以 Go 和 Stop        按钮被禁用。当信号灯为黄色时,唯一可能的下一个状态是 Stop。当信号灯为红色时,唯一可能的下一个状态是 Go。
应用程序缩减程序和它的操作的代码未更改,但现在分别位于自己的文件中。清单 4 给出了应用程序的入口点的代码。
清单 4. 入口点          (index.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import ReactDOM from 'react-dom';
import Redux, { createStore } from 'redux';

import { reducer } from './reducer';
import { App } from './app';

const store = createStore(reducer);

const render = () => (
  ReactDOM.render(<App store={store}/>,
    document.getElementById('example'))
)

store.subscribe(render);

render(); // initial render




清单 4 的代码使用 ECMAScript 6 (ES6) 导入函数来导入          React、ReactDOM、Redux 和 Redux          createStore() 函数。
当应用程序启动时,它使用应用程序的缩减程序创建一个 Redux 存储(如  所示)。接下来,应用程序使用 Redux 存储的          subscribe() 方法订阅该存储。当 Redux 存储中的状态更改时,Redux 会调用 render()        函数,该函数将呈现 App 组件。请注意, 中的代码将 Redux 存储设置为一个同名的          App 属性。
清单 5 给出了 App 组件。
清单 5. 应用程序          (app.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import { Stoplight } from './stoplight';
import { Buttons } from './buttons';

export class App extends Component {
  render() {
    return(
      <div>
        <Stoplight store={this.props.store} />
        <Buttons   store={this.props.store} />
      </div>
    )
  }
}




App 组件进而导入和呈现两个其他的组件(Stoplight 和 Buttons),并将 Redux        存储传递给这些子组件。
返回列表