Redux - 调度在行动中未定义

Question

我是 redux 的新手，但是我有一个我不明白的问题，它无法解决它。

问题是，当我想在我的操作中调度时，我遇到了一个错误，他说：

dispatch 不是函数

是的，他是未定义的，这就是重点，为什么他是未定义的？

export const clearError = dispatch => {
    console.log('clear error')
    console.log(dispatch)

    dispatch({
        type: 'CLEAR_ERROR'
    })
}

我从 Main.js 调用 clearError 操作，也许我的初始化不正确，但我尝试了几种方法，比如bindActionCreators...

Main.js（我如何通过连接传递道具和调度）

const mapStateToProps = (state) => state
const mapDispatchToProps = {
    clearError: clearError
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Main)

我真的很困惑，因为在其他组件中，我使用了以相同方式制作的另外两个动作，一切正常......

我不知道它是否可以帮助您了解问题的根源，但我向您展示了我如何配置商店以在 App.js 中调用 configureStore()。

import {applyMiddleware, createStore} from "redux";
import thunk from 'redux-thunk';

import reducers from './reducers'

const configureStore = () => {
    const middleware = [thunk]
    return createStore(reducers, applyMiddleware(...middleware))
}

export default configureStore

我正在听取有关 redux 以及使用它的最佳方式的所有帮助和建议！

非常感谢您的阅读❤️

Answer 1

问题是你没有从你的动作创建者那里返回一个函数，dispatch 作为参数之一：

export const clearError = () => dispatch => {

在幕后，当您将动作创建者传递给 mapDispatchToProps 时，Redux 会将分派参数的“映射”到您的动作创建者，然后将映射的动作创建者分配给组件属性。
这也是为什么你必须打电话给this.props.clearError() 而不仅仅是clearError()。