react-redux

为了方便使用，redux的作者封装了一个react的专用库React-Redux。

安装

npm install --save react-redux

容器组件和展示组件

在react-redux中将组件分为了容器组件和展示组件，大部分组件应该还是展示组件，但是需要几个容器组件把它们和Redux的store连接起来。

\	展示组件	容器组件
作用	描述如何展现样式，骨架	描述如何获取数据。状态更新
直接使用Redux ?	否	是
数据来源	props	监听Redux state
数据修改	从props调用回调函数	向Redux派发actions
调试方法	手动	通常由react-redux生成

容器组件可以使用store.subscribe()来编写。但是这样做就无法使用react-redux带来的性能优化了。所以我们使用react-redux中的connect()方法。

connect()

connect()方法可以接收两个参数mapStateToProps和mapStateToProps。

mapStateToProps

这个函数用来指定如何把当前store中的state映射到组件的props中。

引用文档中的例子来看一下，VisibleTodoList 组件需要计算传到 TodoList 中的 todos，所以定义了根据state.visibilityFilter 来过滤 state.todos的方法

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)
  }
}

mapDispatchToProps

用来分发action，mapDispatchToProps接收dispatch()方法并且返回期望注入到展示组件的props中的回调函数。

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

最后在connet()方法把它两传入。

import { connect } from 'react-redux'

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

export default VisibleTodoList

mapStateToProps是把展示组件所需要的state中值，传递给展示组件的props。mapDispatchToProps是把容器组件中执行dispatch的方法注入到展示组件中。其实就是一个负责传值一个负责传方法。

传入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')
)

后话

当然以上这些只是官方介绍的基本原理代码，真正的项目中肯定会有各种封装，或者好用的中间件等等。但是原理都是这样。