javascript - Redux - 调度在行动中未定义

Question

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

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

dispatch is not a function

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

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

    dispatch({
        type: 'CLEAR_ERROR'
    })
}

我调用 清除错误 来自 的操作Main.js ，也许我的初始化不正确，但是我尝试了几种方法，例如 bindActionCreators ...

Main.js(我如何通过连接传递 Prop 和调度)

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Main)

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

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

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 从 Action 创建者返回函数。作为论据之一:

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

在底层，当你将你的 action creators 传递给 mapDispatchToProps 时，Redux “映射”那个 dispatch 参数给你的 action creators，然后将映射的 action creators 分配给组件属性。
这也是您必须调用this.props.clearError() 的原因。而不仅仅是 clearError() .