React-redux 的学习记录

1. 添加 React-redux 到项目

react-redux并不是内置在redux里的，因此要单独添加：
cd到项目目录，执行
yarn add react-redux

2. React-redux 的组件拆分规范

react-redux把组件分成了两个大类：UI组件 和 容器组件

UI组件

UI组件的特征有：

• 只负责UI渲染，不带有业务逻辑
• 是典型的无状态组件，没有state，所有数据由props提供
• 不使用Redux的API

容器组件

容器组件的特征有：

• 负责管理数据和业务逻辑，不负责UI渲染
• 有内部状态
• 使用Redux的API

对于一个既有UI又有业务逻辑的组件，通常用容器组件将UI组件包住，容器组件将数据传给
UI组件，由UI组件来渲染视图。

React-redux 的组件拆分

React-redux规定，所有的UI组件由我们来编写，而容器组件由React-redux自动生成。我们可以把组件的状态管理全都交给它来完成。

3. 应用 React-redux

首先引入connect到组件中，它是一个方法；

import { connect } from 'react-redux';

然后通过connect方法对UI组件进行和容器组件进行连接：

connect( mapStateToProps, mapDispatchToProps )( TodoList );

这个连接是什么意思呢？

这里假设我们写好了一个名为TodoList的UI组件，
mapStateToProps 定义了组件的输入逻辑，即组件的公共数据state映射到UI组件中props的规则。

mapStateToProps是一个函数，通过返回对象的键值对来声明这种映射关系。

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
};

mapDispatchToProps定义了组件的输出逻辑，即组件如何通过action对state进行修改的规则；

mapDispatchToProps可以是一个函数，它会得到dispatch和ownProps两个参数，返回一个包含映射关系的对象：

const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e) {
      const action = getInputChangeAction(e.target.value);
      dispatch(action);
    }
    ... 
  }
};

也可以直接定义成一个对象，

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

分别定义好了mapStateToProps和mapDispatchToProps之后，通过connect方法即可根据业务逻辑生成容器组件，并且把容器组件和UI组件连接起来。

进行到这一步，我们发现容器组件还没有取得state，也就是还未与store连接起来，要利用Provider组件，在根组件的外部再包上一层即可：

import { Provider } from 'react-redux';

const App = (
  <Provider store={store}>  {/*连接 */}
    <TodoList />
  </Provider>
);

这样之后，包含在Provider组件里面的所有子组件就都可以取得state了。

4. 细枝末节（备忘录）

mapStateToProps、dispatchToProps 已经把 state 和 ActionCreators 映射到 props上了，
因此在UI组件中可以通过 this.props直接取得它们：

    const { inputValue, 
            list, 
            changeInputValue, 
            addListItem,
            deleteListItem
          } = this.props;
          
       ....   
value = {inputValue}
onChange = {changeInputValue}
       ....

参考资料：
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html