003 react-redux

背景

众所周知 react 只是一个视图库，为了将其与redux连接起来，我们需要引入 react-redux

react-redux将组件分成：

• 容器组件：存在逻辑处理
• UI 组件：只负责现显示和交互，内部不处理逻辑，状态由外部控制

通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store

其他组件通过订阅store中的状态state来更新自身的视图

使用

react-redux 两大核心:

• Provider
• connect

Provider

我们需要 在最顶层使用Provider包裹组件并传入store，使数据向下传递

<Provider store={store}>
    <APP>TITLE</APP>
</Provider>

connect

connect方法协助我们将store上的getState和 dispatch注入到组件的props中

import { connect } from "react-redux";
export default connect(mapStateToProps, mapDispatchToProps)(Singer)

connect 传递两个参数

• mapStateToProps（state, ownProps） mapStateToProps是一个函数，用于建立组件跟 store 的 state 的映射关系，作为一个函数，它可以传入两个参数，结果一定要返回一个 object，传入mapStateToProps之后，会订阅store的状态改变，在每次 store 的 state 发生变化的时候，都会被调用ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用。例如，当 props接收到来自父组件一个小小的改动，那么你所使用的 ownProps 参数，mapStateToProps 都会被重新计算）。 mapStateToProps可以不传，如果不传，组件不会监听store的变化，也就是说Store的更新不会引起UI的更新

  const mapStateToProps = (state) => {
    return {
        // prop : state.xxx  | 意思是将state中的某个数据映射到props中
       foo: state.bar
    };
  };
  

• mapDispatchToProps

  mapDispatchToProps用于建立组件跟store.dispatch的映射关系,可以是一个object，也可以传入函数，如果mapDispatchToProps是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出action，实际上就是要调用dispatch这个方法

  function changeStore (value) {
      return { type: "test", payload: { title: value } }
  }
  const mapDispatchToProps = (dispatch: Dispatch<any>) => {
    return {
      test: (value) =>
        dispatch(changeStore(value))
    };
  };
  

  由于react-redux 内置了 bindActionCreator 所以mapDispatchToProps可以简写， 如上述代码可简写为

  const mapDispatchToProps = {
  	test(value)
  }
  

  mapDispatchToProps如果是一个object，这个object所对应的value必须是actionCreator，这样redux里面会自动帮我们调用bindActionCreator。

  

简单案例 (opens new window)