dispatch 不是函数 TypeError

Question

我是 react-redux 的新手，我正在使用 react-thunk 中间件。 每当我尝试运行我的动作创建者（通过按下我的按钮）时，我都会收到错误“未捕获的类型错误：调度不是函数”。 有谁知道这是怎么回事？

源代码/操作/index.js

function editUserName (newUserName) {
    return {
        type: 'CHANGE_USER_NAME',
        newUserName: newUserName
    }
}

export function editUserNameDelegate () {
    return function (dispatch, getState) {
        return dispatch(editUserName("thunkUser"))
    }
}

src/容器/admin.js

import { editUserNameDelegate } from '../actions/index'
...
<input type="button" onClick={ editUserNameDelegate() } value="edit UserName" />

Answer 1

您正在render内执行editUserNameDelegate函数，而不是将其作为onClick处理程序传递。 你想要onClick={editUserNameDelegate}代替。

此外，如果您是这样编写的，则需要确保该函数在调用时绑定到 dispatch。 你可以这样做：

export default connect(null, {editUserNameDelegate})(MyComponent)

然后在渲染函数中传递onClick={this.props.editUserNameDelegate} 。

Answer 2

store 提供了dispatch功能。 因此，您要么需要使用诸如从 react-redux ( https://github.com/reactjs/react-redux ) connect东西将您的组件连接到商店，要么您需要调用store.dispatch(editUserNameDelegate()) 。

您还需要确保在商店中添加了 redux-thunk 作为中间件。 在此处查看有关 redux-thunk 的更多信息： https : //github.com/gaearon/redux-thunk

Answer 3

你应该提供什么是 src/containers/admin.js 函数或类？

如果是函数组件，则应使用onClick={() => editUserNameDelegate()}