Redux初阶

[39Er]

redux数据流

react生命周期

Redux的适用场景：多交互、多数据源

例：
用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了WebSocket
View要从多个来源获取数据

三大原则

1. 单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

2. State 是只读的

惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件
的普通对象。

3. 使用纯函数来执行修改

Redux 组成（TODO）

1. Action

把数据从应用传到store的有效载荷，是store的唯一数据来源。

我们应该尽量减少在Action中传递的数据。

store里能直接通过store.dispath()调用dispatch()方法，但是大多数情况下会使用react-redux提供的
connect()帮助器来调用。bindActionCreators()函数可以把多个action创建函数绑定到dispatch()方法上。

2. Reducer

指明应用如何更新state。

在Redux应用中，所有state都被保存在一个单一对象中。建议在写代码前先向下这个对象的结构。

开发复杂的应用时， 不可避免会有一些数据相互引用。 建议你尽可能地把 state 范式化， 不存在嵌套。 把所有数据放到一个对象里， 每个数据以 ID 为主键， 不同实体或列表间通过 ID 相互引⽤数据。 把应用的state 想像成数据库。

Reducer是一个纯函数，接收旧的state和action，返回新的state。

永远不要在reducer中做这些操作：

• 修改传入参数；
• 执行有副作用的操作，如API请求和路由跳转；
• 调用非纯函数，如 Date.now() 或 Math.random()

只要传入参数相同， 返回计算得到的下一个 state 就一定相同。 没有特殊情况、 没有副作用， 没有 API 请求、 没有变量修改， 单纯执行计算。

注意每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。

3. Store

Store是将Action和Reducer联系起来的。职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

再次强调一下：Redux 应用只有一个单一的 store 。

import { createStore } from 'redux'
import todoApp from './reducers'

let store = createStore(todoApp)

数据流

严格的单向数据流是 Redux 架构的设计核心。

Redux 应用中数据的生命周期遵循下面 4 个步骤：

1. 调用 store.dispatch(action)

2. Redux store 调用传入的 reducer 函数

3. 根reducer把多个子reducer输出合并成一个单一的state树

4. Redux store 保存了根 reducer 返回的完整 state 树

这个新的树就是应用的下一个 state！所有订阅 store.subscribe(listener) 的监听器都将被调用；监听器里可以调用 store.getState() 获得当前 state。

Redux 与 React Router结合

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router, Route, browserHistory } from 'react-router';
import App from './App';
const Root = ({ store }) => (
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/(:filter)" component={App} />
    </Router>
  </Provider>
);
Root.propTypes = {
  store: PropTypes.object.isRequired,
};
export default Root;