数据流程redux学习（一）

思考题：

react+redux开发这么一个原型，要怎么开发？

整个redux流程的逻辑非常清晰，数据流是单向循环的，就像一个生产的流水线：

store（存放状态） -> Container（显示状态） -> reducer （处理动作）-> store

redux画图理解：

redux 只是定义了应用的数据流程，只解决了 “数据层”（model layer） 的问题，

一般还会使用 react， angular 等作为“显示层” （UI layer） 来一起使用，我们项目采用 react 作为显示框架。

分工明确：

工作分配：
1. 应用的基础配置工作应由前端开发主管负责，大家不必详细理解。
2. 布局组
container、component
静态布局 HTML + CSS
动态布局 使用 JSX 语法对静态布局做动态渲染处理
3. 逻辑组
action开发 - 制作redux流程的action
reducer开发 - 制作redux流程的reducer

- src 源码文件夹：包含项目源码，我们基本都在这个文件夹下做开发

    - containers   容器文件夹：存放容器组件，比如 “苹果篮子”
    - components   组件文件夹：存放普通显示组件，比如 “苹果”
    - actions      actions文件夹：存放可以发出的action
    - reducers     reducers文件夹：存放action的处理器reducers
    - services     服务文件夹：存放经过封装的服务，如 ajax服务, 模拟数据服务
    - styles       样式文件夹：存放应用的样式，如css, scss
    - images       图片文件夹：存放图片资源
    - apis         开发接口文件夹：存放开发接口文档

action创建函数(action creator)，返回纯对象（纯粹的对象）

reducer就是一个纯函数，保持reducer的纯净很重要，不要在reducer里请求API和路由跳转
不要调用非纯函数，如 Date.now() 或 Math.random()。单纯执行计算。

在reducer里应该设计好state结构，有时候会根据后台返回的json数据设计

动态渲染：
根据一个state数据对象来显示内容
1. 确定state数据结构 （leader约定好数据结构，并在reducer中给出）
2. 知道容器的state是store中state的一部分
3. 自己定义普通的state，并在文件中说明清楚

动态布局：
HTML+CSS基础和JSX 语法能力

state的格式我们会在其对应的reducer中规定（因为我们需要在reducer中提供对应state的默认值）

Store(存储state)
store.getState()获取state
store.dispatch(action)更新state
store.subscribe(listener)注册监听器
unsubscribe = store.subscribe(listener)执行返回的函数unsubscribe()注销监听器

再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

1. 狭义的 action

狭义的action是指一个简单的对象，对象的结构如下，只要在对象内包含type属性指明action的名称即可，同时，在对象的其他属性里，可以以任何形式自由保存其他相关数据。

let action = {
    type: 'ACTION_NAME',
    ...
}

一般 type 的内容使用 大写字母+下划线 的格式。

在这个定义的基础上，业界提出以一种标准 action， 叫做 Flux Standard Action , 该标准下的action除了type属性之外，只允许多加（不是必须包含）这三个属性：payload，error，meta。

let FSA = {
    type: 'ACTION_NAME',
    payload: <bool | number | string | object>, //action的负载，可以是数据或 error 对象
    error: <bool>, // 指明该action是否是一个以 error 为负载的action
    meta: <string> // action元数据， 包含解释该action含义的信息
}

我们宅印约定都要使用 Flux Standard Action，下面是吃苹果 action：

let FSA = {
    type: 'EAT_APPLE',
    payload: 3, // 负载是3, 说明吃掉3号苹果， 这里也可以写成 { id : 3 }
    meta: 'This action will eat an apple!' // (不是必须的)
}

一个action只是一个对象，他需要根据时机被 store 的 dispatch 函数调用才会开始进行处理：store.dispatch(action_1)。

2. 广义的 action

redux-thunk中间件：
https://github.com/gaearon/redux-thunk
广义的 action 是指在中间件的支持下，dispatch 函数可以调用的数据类型，除了普通action之外，常见的有 thunk, promise 等。我们用常用的 thunk来举个例子。

thunk 其实就是一个代码片段，可以简单理解为一种特定的函数，我们可以dispatch 这个thunk。 thunk函数具有如下的签名

(dispatch, getState) => {
    //在函数体内可以使用 dispatch 方法来发射其他 action
    //在函数体内可以使用 getState 方法来获取当前的state
}

下面是一个我们摘苹果动作的例子：

let pickAppleAction = (dispatch, getState) => {
    ajax({
        url: '/pickApple',
        method: 'GET',
    }).done(data => {
        //发射普通 action
        dispatch({
            type: 'DONE_PICK_APPLE',
            payload: data.weight // 或者 payload: {weight: data.weight}
        });
    }).fail(xhr => {
        //发射普通 action, 其负载是一个error
        dispatch({
            type: 'FAIL_PICK_APPLE',
            payload: new Error(xhr.responseText) ,
            error: true
        });
    })
}
        

定义好之后，我们可以直接这样调用这个thunk：

dispatch( pickAppleAction )
接下来，我们来做进一步优化，把action统一为actionCreator , 我们不难察觉，每次都要书写{ type: 'ACTION_NAME' ... } 是很麻烦也很容易出错的，

actionCreator 就是为解决这个问题而生的，actionCreator 就是一个产生特定action（这里指广义的action）的函数，下面来看简单的actionCreator 例子：

//传统写法
var eatApple = function(id) {
　　return {
　　　　type: 'EAT_APPLE', 
　　　　payload: id
　　}
}

// es6 写法
let eatApple = id => ({
　　type: 'EAT_APPLE', 
　　payload: id
})
这样一来，一方面是使用起来比较简单方便，另一方面是具有文档作用。
只需要这样发射action就可以啦：

dispatch(eatApple(3))
普通action的actionCreator封装工作, 可以使用 redux-actions 自动完成, 查看其文档就可以快速上手，可以根据情况使用。

组件的包装

任何一个从 connect() 包装好的组件都可以得到一个 dispatch 方法作为组件的 props，以及得到全局 state 中所需的任何内容。

connect() 的唯一参数是 selector。此方法可以从 Redux store 接收到全局的 state，然后返回组件中需要的 props。最简单的情况下，可以返回一个初始的 state （例如，返回认证方法），但最好先将其进行转化。

异步action

最后，如何把之前定义的同步 action creator 和 网络请求结合起来呢？标准的做法是使用 Redux Thunk middleware。

要引入 redux-thunk 这个专门的库才能使用。我们后面会介绍 middleware 大体上是如何工作的；

目前，你只需要知道一个要点：通过使用指定的 middleware，action creator 除了返回 action 对象外还可以返回函数。这时，这个 action creator 就成为了 thunk。

当 action creator 返回函数时，这个函数会被 Redux Thunk middleware 执行。

这个函数并不需要保持纯净；它还可以带有副作用，包括执行异步 API 请求。

这个函数还可以 dispatch action，就像 dispatch 前面定义的同步 action 一样。

我们仍可以在 actions.js 里定义这些特殊的 thunk action creator。