【笔记系列】React 中的 context 全局上下文和 Redux 中的 mapStateToProps

context 的使用

• 使用 context 在父组件需要指定 childContextTypes，在子组件需要指定 contextTypes，然后直接使用即可
• 父组件存放到 context 用 getChildContext()，子组件使用时直接取用 this.context
• redux 中的 this.context 通常是一个 store 对象，该对象包含以下三大件：

store = {
	dispatch: action => {…}
	getState: () => state
	subscribe: listener => listeners.push(listener)
}

这是因为 store 是从 createStore产生的：

function createStore(reducer) {
  let state = null;
  const listeners = [];
  const subscribe = (listener) => listeners.push(listener);
  const getState = () => state;
  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach((listener) => listener());
  };
  dispatch({});
  return { getState, subscribe, dispatch };
}

connect 和 mapStateToProps

之前写的组件是用 React 的 context 和 （自己写滴）redux 实现的，但是可以发现有两个问题：

1. 有大量重复逻辑：基本操作都是 取出 context -> 取出里面的 store -> 用里面的状态设置自己的状态
2. 对 context 的依赖性太强：这些组件都依赖 context 来获取数据，使得这个组件的复用性基本为零。

mapStateToProps 和 mapDispatchToProps

其实本质上就是 state （哪些状态需要观测）和 dispatch （哪些 action 需要被“大张旗鼓”地使用来修改状态）两个东西，只不过是为了满足 connect 函数明智的 API 设计而把他们包装成一个函数的样子而已。

mapStateToProps 作用是从 store 中挑选

state

最初的写法，直接在 constructor 里写死，这样写不利于组件的重复使用。每个独立组件都能够访问到整个 state 里面存的所有状态。

constructor () {
  super()
  this.state = {
    title: {
      text: 'React.js 小书',
      color: 'red',
    },
    content: {
      text: 'React.js 小书内容',
      color: 'blue'
    }
  }
}

mapStateToProps

多了一个步骤，在定义组件的时候，指定哪些 state 里面的键值对是当前组件需要用的，然后作为一个对象参数（props）告诉 Redux，让他去把要用的 state 和当前组件 Content 拼装（wrap）起来，作为一个接收到了共享的 store 对象并能做相应 action 的 WrappedComponent 去使用，这样就实现了解耦式的组件间数据共享了。

// containers/ThemeSwitch.js
const mapStateToProps = (state) => {
  return {
    themeColor: state.themeColor,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSwitchColor: (color) => {
      dispatch({ type: "CHANGE_COLOR", themeColor: color });
    },
  };
};

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

然后通过 Redux 提供的 connect 方法将 mapStateToProps、mapDispatchToProps 等参数（最多四个）传入 Redux，告诉它我们这个组件“需要用什么数据”、“有哪些修改数据的方式”（也可以看作是访问数据的 API）。然后最后传入第二个用括号括起来的参数—— 等着被 wrap 的当前组件。

核心是返回出来的这个对象，它包含了这个方法的主要信息，就是通过它来指明需要在这个包围起当前组件的 wrappedComponent 中，那些是可以用的 state。

mapDispatchToProps

同理，上面的 ThemeSwitch.js 中指明了一个 onSwitchColor 这样一个方法，并且把它给 dispatch 用来搞发布订阅去了，以便及时刷新渲染页面。

核心是传给 dispatch 的那个 action 的对象，它包含了这个方法的整个主要信息，就是通过这个 action 对象来实现修改 themeColor 的值的。