思考题：
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。