get the response of a POST API in React

Question

I have a POST API that when executed needs to render the response result in a div I am using React.js and Redux

This is the service where the api is stored

const addMP3Request = async (payload) => {


    const formData = new FormData();

    formData.append("titre",payload.payload.titre);
    formData.append("description",payload.payload.description);
    formData.append("type",payload.payload.type);
    formData.append("file1",payload.payload.fichier1);

    const wsResponse = await axios.request({
        method: 'post',
        url: `http://localhost:3000/api/watson_tones/analyzeMP3`,
        data: formData,
        config: {
            headers: {
                'Content-Type': `multipart/form-data`,
                'Accept': 'application/json',
            }
        }

    });
    return wsResponse;
}

this is my reducer

  const INIT_STATE = {
    responseData: ''
  };

  export default (state = INIT_STATE, action) => {
    switch (action.type) {


      case ADD_MP3: {
        return {
          ...state,
          responseData: action.responseData
        }

      }

      default:
        return state;
    }
  }

this is the action :

export const addMP3Action = (titre,description,type,fichier1) => {

    return {
    type: ADD_MP3,
    payload: {
      titre: titre,
      description: description,
      type: type,
      fichier1:fichier1
    },

    };

};

and this is the view where I am adding the MP3 and wants to store the response of this api

import React, { Component } from "react";
import { Button, Form, Input, Select} from "antd";
import { connect } from "react-redux";
import {addMP3Action} from "../../appRedux/actions/Mp3";
import SweetAlert from "react-bootstrap-sweetalert";
import AudioPlayer from "react-h5-audio-player";

const FormItem = Form.Item;
const Option = Select.Option;

class AjoutExtrait extends Component {

  constructor() {
    super();
    this.state = {
      selectedFileUrl: '',
      selectedFileName:"",
      showPlayer:false,
      alertMessage: "",
      alertSuccess: false,
      alertWarning: false,
      titre:'',
      description:'',
      type:"",
      responseData:''

    };
    this.onFileChange = this.onFileChange.bind(this)
    this.handleChangeTitre = this.handleChangeTitre.bind(this)
    this.handleChangeDescription = this.handleChangeDescription.bind(this)
    this.handleChangeType = this.handleChangeType.bind(this)
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.responseData !== prevState.responseData && nextProps.responseData) {
      //console.log('responseDataaa',nextProps.responseData)
      return { responseData: nextProps.responseData };

    } else
    //console.log('responseDataaa',nextProps.responseData)
     return null;
  }

  onFileChange(e) {
    this.setState({ file: e.target.files[0] });
    this.setState({ selectedFileUrl: URL.createObjectURL(e.target.files[0]) });
    this.setState({ showPlayer: true });
    this.setState({ selectedFileName: e.target.files[0].name });
  }

  handleChangeTitre(event) {
    this.setState({titre: event.target.value});
  }

  handleChangeDescription(event) {
    this.setState({description: event.target.value});
  }
  // handleChangeType(event) {
  //   this.setState({type: event.target.value});
  // }
  handleChangeType = (value) => {
   let  selectedFilter = value;
    this.setState({type: selectedFilter});
  }

  handleFormSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.addMP3Action(this.state.titre,this.state.description,this.state.type,this.state.file);
       }
    });
  }

  onConfirmAlertMessage = () => {
    this.setState({
      alertMessage: "",
      alertSuccess: false,
      alertWarning: false,
    });
  };

  renderAlertMessage(){
    var intl = this.props.intl;
    const { alertSuccess, alertWarning, alertMessage } = this.state;

    return(
     <div>
        <SweetAlert
          show={alertSuccess}
          success
          title={alertMessage !== "" ?(intl.formatMessage({id: alertMessage})):""}
          onConfirm={this.onConfirmAlertMessage}>
        </SweetAlert>

        <SweetAlert show={alertWarning}
          warning
          title={alertMessage !== "" ?(intl.formatMessage({id: alertMessage})):""}
          onConfirm={this.onConfirmAlertMessage}>
        </SweetAlert>
     </div>
    );
  }

  render() {
    // const { getFieldDecorator } = this.props.form;
   console.log("gfgfg",this.props.responseData)
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 12 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 20 },
      },
    };

    return (
      <div ref={this.props.scrollDivAjoutExtrait} className="cm-comedien-mp3-card-ajout">
        <h2>Ajouter un Extrait MP3</h2>
        <p> gfdffd {this.props.responseData}</p>
        <Form onSubmit={this.handleFormSubmit}>

          <FormItem {...formItemLayout}>
            <p>Titre</p>
              <Input value={this.state.titre} onChange={this.handleChangeTitre}/>
          </FormItem>

          <FormItem {...formItemLayout}>
            <p>Description</p>
              <Input value={this.state.description} onChange={this.handleChangeDescription}/>
          </FormItem>

          <FormItem {...formItemLayout}>
          <p>Type</p>
              <Select
              // name="type"
              // value={this.state.type} 
              defaultValue=""
              onChange={this.handleChangeType}
             >

                <Option value="1">type 1</Option>
                <Option value="2">type 2</Option>
              </Select>   
          </FormItem>
          <FormItem {...formItemLayout}>
              <p>Upload fichier MP3</p>
              <div className="cm-comedien-mp3-ajout-file-container">
                <input  style={{ opacity: "0",display:"none" }} 
                        type="file" 
                        id="file" 
                        name="file" 
                        title="Choisir un fichier mp3" 
                        accept=".mp3" 
                        onChange={this.onFileChange} 
                />
                <div class="cm-comedien-mp3-ajout-file-name">
                  <span style={{ paddingRight: "12px" }}>
                    {this.state.selectedFileName}
                  </span>
                </div>
                <div class="cm-comedien-mp3-ajout-file-button">
                  <label for="file">
                    upload
                  </label>
                </div>
              </div>
          </FormItem>

          {this.state.showPlayer ?
          <FormItem {...formItemLayout}>

            <AudioPlayer
              type="audio/mp3"
              position="inline"
              nomComedien=""
              titre={this.state.selectedFileName}
              fileName={this.state.selectedFileName}
              url={this.state.selectedFileUrl}
            />  

          </FormItem>
          :null}

          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              Ajouter
            </Button>
          </FormItem>
        </Form>

        <div style={{width:"100%",height:"400px",background:"white",marginBottom:"50px"}}>

        </div>

        {this.renderAlertMessage()}

      </div>
    );
  }

}

const AjoutExtraitForm = Form.create()(AjoutExtrait);

const mapStateToProps = ({ mp3 }) => {
  const {
    responseData
  } = mp3;

  return {
    responseData
  }
};


export default connect(mapStateToProps, { addMP3Action })(AjoutExtraitForm);

When i console.log(this.props.responseData) I get undefined Do you have any idea ?

Answer 1

I believe your issue is that in your reducer, action has no property responseData. Remember that your action returns an object with properties type and payload. When you pass it to your reducer to update the state, you need to look into action.payload to access the data that was sent in the action.

For example, you might want your reducer to look more like this:

const INIT_STATE = {
    responseData: ''
  };

  export default (state = INIT_STATE, action) => {
    switch (action.type) {
      case ADD_MP3: {
        return {
          ...state,
          responseData: action.payload
        }

      }
      default:
        return state;
    }
  }

You can always refer to the documentation for more specifics: https://redux.js.org/basics/basic-tutorial