Redux-thunk “调度不是函数”

Posted 2023-02-22

【中文标题】Redux-thunk “调度不是函数”

【英文标题】：Redux-thunk "dispatch is not a function"

【发布时间】：2020-03-25 16:28:33

【问题描述】：

我已经通过以下方式配置了 redux-thunk

import BrowserRouter from "react-router-dom";
import createStore, applyMiddleware, compose from "redux";
import Provider from "react-redux/es/components/Provider";
import braintrainer from "./store/reducers/braintrainer";
import thunk from 'redux-thunk';



const store = createStore(
    braintrainer,
    applyMiddleware(thunk),
); 



ReactDOM.render(
    <Provider store=store>
        <BrowserRouter>
            <BrainTrainer/>
        </BrowserRouter>
    </Provider>
    , document.getElementById('root'));

然后在我的一个组件中，我映射函数 onLoginClicked 以调度 startLogin 操作

const mapDispatchToProps = dispatch => (
    onDifficultySelected: difficulty => dispatch( difficulty, type: 'SET_DIFFICULTY' ),
    onLoginClicked : (username,password) => dispatch(() => startLogin(username,password))
);
export default withRouter(connect(null, mapDispatchToProps)(BrainTrainer));

我将 onLoginClicked 函数传递给我的登录组件，并在单击登录按钮时调用它

<button type='button' className='login-btn' onClick=onLoginClicked(passWord,userName)>
    isLogin ? 'Login' : 'Sign up'
</button>

我的 startLogin 动作创建器看起来像这样

import axios from 'axios';

const baseUrl = 'http://localhost:5000';

export const login = (token) => (
    type: 'LOGIN',
    token
);


export const startLogin = (password,username) => 
    return dispatch => 
        axios.post(baseUrl+'/api/auth/login',
            username,
            password
        ).then((data) => dispatch(login(data.data.token)))
    
;

然而，当我调用 onLoginClicked 函数时，我在 startLogin 操作创建器中收到此错误。

Unhandled Rejection (TypeError): dispatch is not a function

谁能告诉我哪里出错了？

错误图片

【问题讨论】：

您的startLogin() 正在尝试访问.then(... dispatch...) 中的dispatch，但这实际上并不是一回事。 dispatch 更高。尝试this.props.dispatch 或考虑重构一下

嗯。我正在关注alligator.io/redux/redux-thunk

中的示例

他和我一样在 then() 中调用 dispatch

还有很多代码丢失（比如 onLoginClicked 在哪里调用？以及 mapDispatchToProps 在哪里调用？）

@boris-grunwald 尝试在您的 thunk 中返回承诺：return axios.post(baseUrl+'/api/auth/login' ...。

【参考方案1】：

在dispatch(fn) 中，fn 需要是一个“thunk”函数——接受dispatch 本身作为第一个参数。不是匿名函数：

dispatch(() => startLogin(username,password))

但是来自startLogin的返回值：

dispatch(startLogin(username,password))