本文共 4815 字，大约阅读时间需要 16 分钟。
可以看到，在整个流程中数据都是单向流动的，这种方式保证了流程的清晰。
createStore 创建 store 对象，包含 getState, dispatch, subscribe, replaceReducer
reducer reducer 是一个计划函数，接收旧的 state 和 action，生成新的 state action action 是一个对象，必须包含 type 字段 dispatch dispatch( action ) 触发 action，生成新的 state subscribe 实现订阅功能，每次触发 dispatch 的时候，会执行订阅函数 combineReducers 多 reducer 合并成一个 reducer replaceReducer 替换 reducer 函数 middleware 扩展 dispatch 函数！redux 和 react 没有关系，redux 可以用在任何框架中。
connect 不属于 redux，它其实属于 react-redux
React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
UI组件：
const Title = value =>{ value}
;
容器组件：
如果一个组件既有 UI 又有业务逻辑，那怎么办？
将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。（其实就是我们最常见的class组件）
作用：将 UI 组件生成容器组件
下面 TodoList 是 UI 组件，VisibleTodoList 就是生成的容器组件。import { connect } from 'react-redux'const VisibleTodoList = connect()(TodoList); 但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息。
因此，connect方法的完整 API 如下：
import { connect } from 'react-redux'const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps)(TodoList) 前者 mapStateToProps 负责输入逻辑，即将state映射到 UI 组件的参数（props）
后者 mapDispatchToProps 负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。
mapStateToProps 执行后应该返回一个对象，里面的每一个键值对就是一个映射。const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) }} 后面的 getVisibleTodos 函数是可以根据 state 计算出 todos 的值。
建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。
如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。const mapDispatchToProps = ( dispatch, ownProps) => { return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter }); } };} 返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。
<Provider> 组件connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。
一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。
React-Redux 提供Provider组件，可以让容器组件拿到state。
import { Provider } from 'react-redux'import { createStore } from 'redux'import todoApp from './reducers'import App from './components/App'let store = createStore(todoApp);render( , document.getElementById('root')) 这样一来，App的所有子组件就默认都可以拿到state了。
它的原理是React组件的context属性：class Provider extends Component { getChildContext() { return { store: this.props.store }; } render() { return this.props.children; }}Provider.childContextTypes = { store: React.PropTypes.object} 举例：
class VisibleTodoList extends Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe(() => this.forceUpdate() ); } render() { const props = this.props; const { store } = this.context; const state = store.getState(); // ... }}VisibleTodoList.contextTypes = { store: React.PropTypes.object} import React, { Component } from 'react'import PropTypes from 'prop-types'import ReactDOM from 'react-dom'import { createStore } from 'redux'import { Provider, connect } from 'react-redux'// React componentclass Counter extends Component { render() { const { value, onIncreaseClick } = this.props return ( { value} ) }}Counter.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired}// Actionconst increaseAction = { type: 'increase' }// Reducerfunction counter(state = { count: 0 }, action) { const count = state.count switch (action.type) { case 'increase': return { count: count + 1 } default: return state }}// Storeconst store = createStore(counter)// Map Redux state to component propsfunction mapStateToProps(state) { return { value: state.count }}// Map Redux actions to component propsfunction mapDispatchToProps(dispatch) { return { onIncreaseClick: () => dispatch(increaseAction) }}// Connected Componentconst App = connect( mapStateToProps, mapDispatchToProps)(Counter)ReactDOM.render( , document.getElementById('root')) 使用React-Router的项目，与其他项目没有不同之处，也是使用Provider在Router外面包一层，毕竟Provider的唯一功能就是传入store对象。
const Root = ({ store }) => ( ); 转载地址：http://qapo.baihongyu.com/