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

Question

我使用 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 将此方法与调度绑定：

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' 应用到我已经绑定到调度的动作创建者。

谢谢

Answer 1

你需要 return fetch() 在你的箭头函数里面 loginAttempt。像这样：

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

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

Answer 2

对我来说，我在调度程序内部完成所有逻辑，所以我向它传递了一个完成的回调。

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

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

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

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

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

cannot get a promise after bindActionCreators in Redux

promise

redux

redux-thunk