react-redux

使用React-Redux时，首先要创建一个Provider组件，作为最顶层的组件将所有React组件包裹起来，从而使所有的React组件都变为Provider的后代组件，再将已经创建好的Store作为属性传递给Provider组件

这样一来，App的所有子组件就默认都可以拿到Store了

import { Provider } from "react-redux";

const store = createStore(rootReducer);

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

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

所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它

React-Redux 提供connect方法，用于从 UI 组件生成容器组件

import { connect } from 'react-redux'

const VisibleTodoList = connect(

  mapStateToProps,

  mapDispatchToProps

)

)(TodoList)

上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps

mapStateToProps:建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系,mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

const mapStateToProps = (state) => {

  return {

    todos: getVisibleTodos(state.todos, state.visibilityFilter)

  }

}

}

const getVisibleTodos = (todos, filter) => {

  switch (filter) {

    case 'SHOW_ALL':

      return todos

    case 'SHOW_COMPLETED':

      return todos.filter(t => t.completed)

    case 'SHOW_ACTIVE':

      return todos.filter(t => !t.completed)

    default:

      throw new Error('Unknown filter: ' + filter)

  }

}

}

mapDispatchToProps:建立 UI 组件的参数到store.dispatch方法的映射

const mapDispatchToProps = (

  dispatch,

  ownProps

)

) => {

  return {

    onClick: () => {

      dispatch({

        type: 'SET_VISIBILITY_FILTER',

        filter: ownProps.filter

      });

    }

  };

}

}