Redux笔记（三）: React-Redux 的用法

1.UI组件

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

UI组件的特征：

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

2.容器组件

容器组件的特征：

 - 负责管理数据和业务逻辑，不负责 UI 的呈现
 - 带有内部状态
 - 使用 Redux 的 API

3.connect()

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

import { connect } from 'react-redux'

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

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

4.mapStatToProps()
mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。

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

5.mapDispatchToProps()

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。
如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。

const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}

6. 组件

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(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)