React-Redux

首先我们来看看，什么是 Redux ?

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 除了和 React 一起用外，还支持其它界面库 Angular、Ember、jQuery 甚至纯 JavaScript。它体小精悍（只有2kB，包括依赖）。

下面是 Redux 的工作流程：

Redux 的工作流程

那么什么是 React 呢？

React 是一个用于构建用户界面的 JavaScript 库。

React 只是 DOM 的一个抽象层，代码结构和组件之间的通信是没有涉及的，对于大型复杂的应用来说，这却是极其重要的，因此，React 没法写大型应用。

如果在你的项目中，某个组件的状态需要共享，或者某个状态需要在任何地方可以拿到，或者需要在某个组件中改变全局状态，或者需要在一个组件中改变另一个组件的状态，这时，可以考虑使用 Redux。

现在来看看什么是 React-Redux？

React-Redux 是 Redux 官方提供的 React 绑定库。具有高效且灵活的特性。它能够使你的 React 组件从 Redux store 中读取数据，并且向 store 分发 actions 以更新数据。

React-Redux 库并不是 Redux 内置，需要单独安装。

安装

npm install --save react-redux

React-Redux 依赖 React 0.14 或更新版本。

如果你不使用 npm，你也可以从 unpkg 获取最新的 UMD 包（包括开发环境包和生产环境包）。如果你用 <script> 标签的方式引入 UMD 包，那么它会在全局抛出window.ReactRedux对象。

React-Redux 是基于容器组件和展示组件相分离的开发思想

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

UI 组件

只负责 UI 的呈现，不带有任何业务逻辑（骨架、样式）
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API

容器组件

负责管理数据和业务逻辑，不负责 UI 的呈现（数据获取、状态更新）
带有内部状态
使用 Redux 的 API

UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

如果一个组件既有 UI 又有业务逻辑，那怎么办？可以将它进行拆分，外面是一个容器组件，里面是一个 UI 组件。前者负责与外部的通信，将数据传给里面的 UI 组件，由 UI 组件负责渲染出视图。

从技术上讲，可以直接使用 store.subscribe() 来编写容器组件。但这么做的话无法使用 React-Redux 带来的性能优化以避免很多不必要的重复渲染。因此，不要手写容器组件，而使用 React-Redux 的 connect() 方法来生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

现在开始来创建一些容器组件把展示组件和 Redux 关联起来。

connect()

connect() 方法接受两个参数：mapStateToProps 和 mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将 state 映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

上面的 VisibleTodoList 便是通过 connect 方法自动生成的容器组件，使之与 UI 组件 TodoList 相关联。

mapStateToProps

mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。执行后应该返回一个对象，里面的每一个键值对就是一个映射。

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    case 'SHOW_ALL':
    default:
      return todos
  }
}

const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

mapStateToProps 是一个函数，它接受 state 作为参数，返回一个对象。这个对象有一个 todos 属性，代表 UI 组件的同名参数，后面的 getVisibleTodos 也是一个函数，可以从 state 算出 todos 的值。

mapDispatchToProps

mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

mapDispatchToProps 定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。

mapDispatchToProps 是函数则会得到 dispatch 和 ownProps（容器组件的 props 对象）两个参数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。
mapDispatchToProps 是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。

将容器放到一个组件

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

export default App

传入 Store

有两种方式可以让所有的容器组件访问到 Redux store，一种是把它以 props 的方式传入到所有的容器组件中，也就是需要用 store 把展示组件包裹一层。另一种方法是用 React-Redux 组件 <Provider> 让所有容器组件都可以访问 store，而不需要显示地传递它，只需要在渲染根组件中使用即可。

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

上面代码中，Provider 在根组件外面包了一层，这样一来，App 的所有子组件就默认都可以拿到 state 了。

在实际的项目中，需要权衡是直接使用 Redux 还是使用 React-Redux。