问题描述:
控制台报出错误:dispatch is not a function
,提示下面的代码有问题, 我的代码如下:
const mapDispatchToProps = dispatch => ({
getPrograms: () => dispatch(actions.getPrograms())
})
矛盾点
仔细看我的mapDispatchToProps 里面的方法,没觉得哪里不对的
问题解决
- google 搜索,发现有人提到connect的使用,如果是
export default withRouter(connect(mapDispatchToProps)(Index))
这种的,就会出现了上面的错误 - 检查下我的代码,正好是这个原因,忘了mapStateToProps。加上就ok了。那么问题来了,connect 里面的这个参数mapStateToProps是必须要有的,为什么呢?
connect() 接收四个参数,它们分别是 mapStateToProps,mapDispatchToProps,mergeProps和options。
- mapStateToProps:这个函数允许我们将 store 中的数据作为 props 绑定到组件上。组件将会监听 Redux store 的变化。任何时候,只要 Redux store 发生改变,mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象,这个对象会与组件的 props 合并。
- mapDispatchToProps: 将 action 作为 props 绑定到 组件上。
- mergeProps:mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。
- options:可以定制 connector 的行为。
- 按理来说,mapStateToProps 是可以省略的,但为什么当我没写的时候这里就报错了?
。。。这个还么有研究出来。。。
结论:当connect的第一个参数mapStateToProps不能不写,当不需要的时候可以这样写
connect(null, mapDispatchToProps)(Topic)
或connect(()=>{ return {}}, mapDispatchToProps)(Topic)
,但不能什么都不写
反思
遇到坑要填坑,而不是绕过坑,感觉React-redux还是没有完全吃透,知道正确的解决方法,但是没有找到为什么会这样的原因。。。