在 Redux 中的 bindActionCreators 之后无法得到承诺

Posted 2023-02-22

【中文标题】在 Redux 中的 bindActionCreators 之后无法得到承诺

【英文标题】：cannot get a promise after bindActionCreators in Redux

【发布时间】：2016-11-29 00:00:25

【问题描述】：

我使用 react/redux 来创建一个应用程序。

我有一个自定义操作创建器来发出异步请求（我使用 redux-thunk）。

export function loginAttempt(userData) 
  return dispatch => 

    let formData = new FormData();
    formData.append('username', userData.username);
    formData.append('password', userData.password);

    fetch('https://api.t411.ch/auth', 
      method: 'POST',
      body: formData
    ).then(response => 
      if (response.status !== 200) 
        const error = new Error(response.statusText);
        error.respone = response;
        dispatch(loginError(error));
        throw error;
      
      return response.json();
    ).then(data => 
       dispatch(loginSuccess(data));
    );
  

在我的组件中，我使用 bindActionCreators 将此方法与 dispatch 绑定：

import React,  Component  from 'react';
import  connect  from 'react-redux';
import  bindActionCreators  from 'redux';


import SearchBar from './SearchBar';
import TorrentLayout from './TorrentLayout';

import * as LoginActions from '../actions/login'; // <---- it's where the code above is located
import * as SearchActions from '../actions/search'; 


function mapStateToProps(state) 
  return 
    login: state.login,
    searching: state.searching
  ;


function mapDispatchToProps(dispatch) 
  return bindActionCreators(...LoginActions, ...SearchActions, dispatch);


@connect(mapStateToProps, mapDispatchToProps)
export default class Home extends Component 

  constructor(props) 
    super(props);

    console.log('should be a promise');
    let foobar = this.props.loginAttempt(username: 'username', password:'password');

    console.log(foobar); // <------ undefined

    // that I want to do
    this.props.loginAttempt(username: 'username', password:'password').then(() => 
        this.props.search(this.props.login.token, "mysearch");
    
  

  render() 
    return (
      <div>
        <div>
           <SearchBar ...this.props />
           <TorrentLayout ...this.props/>
        </div>
      </div>
    );
  

我想将“then”应用于我已经绑定到调度的动作创建者。

谢谢

【参考方案1】：

对我来说，我在调度程序中执行所有逻辑，所以我向它传递了一个 done 回调。

在我的组件中，我按如下方式调用操作登录

login(values, setErrors, (user) => 
    console.log('done:', user)
)

然后在我的操作中，我执行所有异步调用，然后在最后调用 done(data)

export const login = (form: ILoginForm, setErrors, done) => 
    return async (dispatch: Dispatch<Action>) => 
    // ....
    done(data)

【参考方案2】：

您需要在loginAttempt 内的箭头函数内输入return fetch()。像这样：

export function loginAttempt(userData) 
  return dispatch => 
    return fetch('https://api.t411.ch/auth', 
      method: 'POST',
      body: formData
    ).then(...);
  

基本上，当您调用绑定动作创建器时，箭头函数会被执行，但它没有返回值。