react-redux：connecting react to

是什么把 react 组件和 redux 连接起来的？答案是 react-redux库。

image.png

两个核心组成部分

• Provider 组件：attaches app to store
• Connect 方法：creates container components

Provider

<Provider store={this.props.store}>
     <App />
</Provider>

Connect

wraps our component so it's connected to the Redux store.

通过这个方法，我们说明了我们希望将 store 的哪部分值作为props和我们的react组件联系起来，同时，我们声明了在 props 上希望暴露出来的 action.

function mapStateToProps(state, ownProps){
   return { appStore : state.authorReducer};
}

export default connect (
    mapStateToProps,
    mapDispatchToProps
)(AuthorPage);

优点：
1. 不需要手动地去订阅store
2. 明确声明了组件里想要的 state 里的那些值
3. 性能提升：组件只有在自己 connect 的值发生变化的时候才渲染

React-Redux 的 Connect 方法接受两个 function 类型的可选参数：
1. mapStateToProps
2. mapDispatchToProps

mapStateToProps

你想让redux store里的哪些值暴露在你的组件里？
当你定义这个方法的时候，组件会自动监听 redux store 的更新，当 store发生更新时，mapStateToProps 会被调用。这个方法返回一个对象，你在这个对象里定义的每一个属性，都会是你容器组件里的一个属性。总的来说，mapStateToProps方法决定了在你的容器组件里，哪些state是可以通过props来使用的。这是一个转换state的逻辑区域，在这里，你把state 转换成最方便容器组件使用的形式。

function mapStateToProps(state){
     return {
          appState : state
     };
}
// in my component
this.props.appstate

mapDispatchToProps

这个方法用来定义我们希望通过 props 来暴露的 action. 概念上，这个和mapStateToProps非常相似，mapStateToProps的目标是state，mapDispatchToProps的目标是 action.
mapDispatchToProps方法的参数是 dispatch. 这里说明一下在redux 的容器组件里匹配 action 到 props 的三种方式 :

1. 不用mapDispatchToProps,直接手动 dispatch 一个 action creator. 在我们自己的组件上使用connect方法时，会自动给组件添加一个 dispatch 的属性（prop). 我们可以直接使用这个 dispatch 的方法来调用 action creator.

this.props.dispatch(loadCourses());

这个写法有几个缺点：

• 调用起来比较麻烦，需要从props上去调用dispatch，并传入目标 action。
• 子组件需要引用到 redux 的一些概念，比如 dispatch 和 action creator。如果你想让子组件尽量保持简单，不去和redux关联，那么上面这个写法就不推荐了。

2. 在调用dispatch的方法里手动封装 action creator ,和1相比，在容器组件里调用的代码更简洁一些。

 function mapDispatchToProps(dispatch){
     return{
        loadCourses:() => {
               dispatch(loadCourses());
          },
       createCourse:(course) => {
               dispatch(createCourse(course));
          }
     };
}
//在component里调用时
this.props.loadCourses()

这个主要就是写起来比较累，所以推荐使用 bindActionjCreators 来完成这项工作。

3. 使用 bindActionjCreators
   bindActionjCreators 方法自动将action creator 封装到 dispatch 方法里。本质上它就是自动为我们做了2里的工作。

function mapDispatchToProps(dispatch){
     return{
         actions:
              bindActionCreators(actions ,dispatch)  
     };
}
//在component里调用时
this.props.actions.loadCourses();

很明显，方法2和3里，子组件不需要知道任何和 redux 有关的概念，他们只需要通过 props来调用action就可以了。

小故事解释 Redux 的作用

1. React : Hey , 课程Action,刚刚有人点了“保存课程” 按钮。
2. Action : 多谢，React童鞋！我会 dispatch 一个 action 给 reducer 来更新 state.
3. Reducer : 哦，谢谢 Action! 我看到你传递过来的当前 state 和 要执行的 action 了，我会给 state 做一个新的拷贝并返回它。
4. Store : Recuder,谢谢你更新了state. 我会确保所有的组件得到这个消息。
5. React-Redux : 哦，谢谢 Store 童鞋的新数据，我会智能地来决定我是否需要将这个变化告诉 React，这样他只需要关心需要更新的UI。
6. React :哦，新的 data 已经从 store 通过 props 传递下来了，我马上通知 UI来更新这个变化。