Redux的三大原则
Redux 可以用这三个基本原则来描述：
单一数据源
整个应用的 state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store中。
State 是只读的
惟一改变 state 的方法就是触发action ，action是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改
为了描述 action 如何改变 state tree ，你需要编写 reducers。
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务。
Action
Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。
const ADD_TODO = 'ADD_TODO'
const action = {
type: ADD_TODO,
payload: 'this is add_todo'
};
上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串this is add_todo。
action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'
Action 创建函数
Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。
在 Redux 中的 action 创建函数只是简单的返回一个 action:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
使用：
dispatch(addTodo(text))
或者
const boundAddTodo = (text) => dispatch(addTodo(text))
Reducer
Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。而这正是 reducer 要做的事情。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}
不要修改 state。 使用 Object.assign()新建了一个副本。不能这样使用 Object.assign({，}state, {visibilityFilter: action.filter })
，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。
在 default情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。
store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。
Store
Store 就是把action、reducer联系到一起的对象。Store 有以下职责：
维持应用的 state；
提供 getState()方法获取 state；
提供 dispatch(action)方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener)返回的函数注销监听器;
再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。
创建store
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
createStore()的第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用，服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。
let store = createStore(todoApp, window.STATE_FROM_SERVER)
发起 Actions
store.dispatch()是 View 发出 Action 的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});
结合 Action Creator，这段代码可以改写如下。
store.dispatch(addTodo('Learn Redux'));
store.subscribe()
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
Redux API
combineReducers
随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state的一部分。
combineReducers辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用createStore
例如：
import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'
import home from './home';
import quiz from './quiz';
import article from './article';
import people from './people';
export default combineReducers({
home,
quiz,
article,
people,
routing: routerReducer
})
bindActionCreators
把 action creators转成拥有同名 keys 的对象，但使用 dispatch把每个 action creator 包围起来，这样可以直接调用它们。
惟一使用 bindActionCreators的场景是当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 Redux store 或 dispatch传给它。
bindActionCreators(actionCreators, dispatch)
actionCreators : 一个 action creator，或者键值是 action creators 的对象.
dispatch : 一个 dispatch函数，由 Store实例提供.
返回值： 一个与原对象类似的对象，只不过这个对象中的的每个函数值都可以直接 dispatch action。如果传入的是一个函数，返回的也是一个函数。
mapDispatchToProps
用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。
如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
function mapDispatchToProps (dispatch) {
return bindActionCreators(actions.default, dispatch);
}
connect
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。
connect(state => state, mapDispatchToProps)(App)
上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
这对router4，写了一个例子：
关于acton
其中index.js如下
import * as loginActions from './login';
import * as homeActions from './home';
import * as articleActions from './article';
import * as quizActions from './quiz';
import * as topicActions from './topic';
import * as peopleActions from './people';
import * as artActions from './art';
import * as quizDetailActions from './quizDetail';
export default {
...loginActions,
...homeActions,
...articleActions,
...quizActions,
...topicActions,
...peopleActions,
...artActions,
...quizDetailActions
}
然后对action处理
在顶级组件里app.js
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import * as actions from '../actions'
.
.
.
function mapDispatchToProps (dispatch) {
return bindActionCreators(actions.default, dispatch);
}
export default connect(state => state, mapDispatchToProps)(App);
对reduce进行处理
import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'
import login from './login';
import home from './home';
import article from './article';
import quiz from './quiz';
import topic from './topic';
import people from './people';
import art from './art';
import quizDetail from './quizDetail';
export default combineReducers({
login,
home,
article,
quiz,
topic,
people,
art,
quizDetail,
routing: routerReducer
})
main.js
import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Router, match, browserHistory, hashHistory} from 'react-router';
import {createLocation} from 'history';
import {syncHistoryWithStore} from 'react-router-redux';
import routes from '../route/routes';
import configureStore from '../store';
import '../common/index.less';
const store = configureStore(browserHistory);
const history = syncHistoryWithStore(browserHistory, store);
render(
<Provider store={store}>
<Router history={history} routes={routes} ></Router>
</Provider>,
document.getElementById('app')
)
store/index.js
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import rootReducer from '../reduces'
const createStoreWithMiddleware = compose(
applyMiddleware(thunk, createLogger())
)(createStore)
export default initialState => createStoreWithMiddleware(rootReducer, initialState)
store里面牵扯的其他api ，我们下节再讲。
参考文档：
Redux中文文档
