使用Redux thunk在异步API请求期间分派redux上的操作

Question

我对redux和react还是个新手。我还检查了一些方法来解决我的问题，但似乎我没有取得任何进展。

我打算按照教程https://github.com/reduxjs/redux-thunk使用redux-thung执行异步操作，但我遇到的挑战是sendApplication()函数没有分派动作nextPage()，hitUrl()函数也不起作用。我在这个问题上已经有好几天了。请找个人帮帮我。

​

import React from 'react';
import { withStyles} from '@material-ui/styles';
import { FormLabel, TextField, Button } from '@material-ui/core';
import {connect} from 'react-redux';
import { nextPage, previousPage, enableBtnAvailability} from '../../actions/formPageController';
import { updateTextValueAvailability, clearField } from '../../actions/formInputController';
import { useStyles } from '../Styles/formStyles';
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
import sendApplication from '../../utility/sendRequest';
import { bindActionCreators } from 'redux';
const axios = require('axios');


const AvailablityTab=  withStyles({
  
})((props) => {
    console.log(props);
    
    const handleChange=(e)=>{
        const name= e.target.name;
        const value = e.target.value;
        const {updateTextValueAvailability} = props;
        updateTextValueAvailability(name,value);

        let unfilledFormFieldArray = props.text.filter((item)=> {
          console.log(item);
          return item.value=== "";
        })
        console.log(unfilledFormFieldArray);
        console.log(unfilledFormFieldArray.length);
        if(unfilledFormFieldArray.length ===0){
          const {enableBtnAvailability} = props;
          enableBtnAvailability();
         
        } 
        
    }

    const handleSubmit=()=>{
      //const {postApplication} = props;
      sendApplication();
      console.log(props);
     
      console.log('he submit');

    }


    const hitUrl = async function () {
      //alert('hi')
      try {
          console.log(3);
        const response = await axios.get('http://localhost:1337/api/v1/application/fetch-all');
        console.log(response);
        return response;
  
      } catch (error) {
        console.error(error);
      }
    };
  
  
  
   const sendApplication = () => {
      console.log(4);
      console.log(props);
      return function(props) {
        console.log('xyz');
        console.log(props);
        const {nextPage} = props; 
          // dispatch(nextPage());
          nextPage();
          console.log(5);
          alert('hi2')
        return hitUrl().then(
          () => {
              console.log('thunk success');
              nextPage();
          },
          () => {
              console.log('thunk error');
              //props.dispatch(previousPage())
          },
        );
      };
    }
  
    
    
    const handlePrevious=()=>{
      const {previousPage} = props;
      previousPage();
 }


    console.log(props);
    const classes = useStyles();
    let validationRule = ['required'];
    let errorMessages = ['This field is required'];
    return (
  <div className="formtab">
  <ValidatorForm //ref="form"
                onSubmit={handleSubmit}
                onError={errors => console.log(errors)}
            >
      {props.text.map((each)=>{
        let onFocus = false;
        if(each.id === 1){
          onFocus = true;
        }
          
          return(<div className={classes.question} key={each.id}>
        <FormLabel className={classes.questionLabel} component="legend">{each.label}</FormLabel>
        <TextValidator
                id={"filled-hidden-label"}
                className={classes.textField}
                hiddenLabel
                variant="outlined"
                fullWidth
                name={each.name}
                onChange={handleChange}
                value={each.value}
                margin= "none"
                placeholder={each.placeholder}
                validators={validationRule}
                    errorMessages={errorMessages}
                autoFocus= {onFocus}
            />
      </div>)
      })}

      
      <div className={classes.buttondiv} >
      <Button className={classes.prev} variant="contained" onClick={handlePrevious}>Previous</Button>
      <Button className={classes.next} variant="contained" type="submit" disabled={!props.btnActivator} >Submit</Button>
      </div>

    </ValidatorForm>  
  </div>  
 
    
)});


const mapStateToProps= (state)=>{
  const availablity = state.availabilityQuestion;
  return {
      text: availablity.text,
      radio: availablity.radio,
      btnActivator: state.btnActivator.availability
  }
}

const mapDispatchToProps = dispatch => bindActionCreators({
  postApplication: sendApplication,
  previousPage,
  enableBtnAvailability,
  updateTextValueAvailability,
  nextPage,
  clearField

}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(AvailablityTab);

​

Answer 1

由于sendApplication返回一个函数，但并不执行它，所以可以这样调用它：

sendApplication()(props); // it looks like you expect props to be passed to your function

这应该会成功执行您的nextPage函数并返回hitUrl返回的值。

另一种方法是执行函数，而不是返回它

sendApplication(props);
...
const sendApplication = (props) => {
  console.log('xyz');
  console.log(props);
  const {nextPage} = props; 
  // dispatch(nextPage());
  nextPage();
  console.log(5);
  alert('hi2')
  return hitUrl().then(
    () => {
      console.log('thunk success');
      nextPage();
    },
    () => {
      console.log('thunk error');
      //props.dispatch(previousPage())
    },
  );
};

现在我们去掉了内部函数，直接调用它。现在调用sendApplication将返回hitUrl的返回值。