重构 ThemeSwitch 组件除了需要 store 里面的数据,还需要通过 store 的 dispatch 来修改数据。现在 connect 还提供不了这个功能,需要进一步改进 connect。
仿照给 connect 传入 mapStateToProps 函数来达到获取指定数据的效果,给 connect 再提供一个 mapDispatchToProps 函数来告诉 connect 组件需要如何调用 dispatch。这个函数应该是这样的:1
2
3
4
5
6
7const mapDispatchToProps = (dispatch) => {
return {
onSwitchColor: (color) => {
dispatch({ type: "CHANGE_THEME_COLOR", themeColor: color });
}
};
};
mapDispatchToProps 也是返回一个对象,和 mapStateToProps 不同的地方是传入的参数不是 state ,而是 dispatch。下面来修改 connect ,让他可以处理 mapDispatchToProps。
1 | import React from "react"; |
这时候我们就可以重构 ThemeSwitch,让它摆脱 store.dispatch 和 context。
1 | import React, { Component } from "react"; |
这时候这三个组件的重构都已经完成了,代码大大减少、不依赖 context,并且功能和原来一样。