title: How to dispatch response data from api on action in react redux?
body: <p>I'm currently working on an e-commerce project and we are using react-redux. But I'm having a problem with returning a response from API instances using Axios request call on the action for Login with Jwt module.</p>
  
  <p>This is Axios file that consists of base URLs and instances.</p>
  
  <p><strong>api/lib/axios.js:</strong></p>
  
  <pre><code>/* eslint-disable no-nested-ternary */
  import axios from "axios"
  import { store } from "../../redux/store"
  import { REFRESH_TOKEN } from "../../redux/auth/constant"
  import Environment from "./environment"
  
  const axiosInstance = axios.create({
    baseURL: Environment.BASE_URL,
    headers: {
      Authorization: localStorage.getItem("access")
        ? `JWT${localStorage.getItem("access")}`
        : "none",
      "Content-Type": "application/json",
      accept: "application/json"
    }
  })
  
  axiosInstance.interceptors.response.use(
    (response) =&gt; response,
    (error) =&gt; {
      const originalRequest = error.config
  
      if (
        error.response.status === 401 &amp;&amp;
        error.response.statusText === "Unauthorized"
      ) {
        const body = store.getState().auth.token.refresh
        return axiosInstance
          .post("api/token/refresh/", { refresh: body })
          .then((response) =&gt; {
            store.dispatch({
              type: REFRESH_TOKEN,
              payload: response.data
            })
            axiosInstance.defaults.headers.Authorization = `JWT ${response.data.access}`
            originalRequest.headers.Authorization = `JWT ${response.data.access}`
  
            return axiosInstance(originalRequest)
          })
      }
      return Promise.reject(error)
    }
  )
  
  export default axiosInstance
  </code></pre>
  
  <p>Here is also an environment file where all our environment variables are stored.</p>
  
  <p><strong>api/lib/environment.js:</strong></p>
  
  <pre><code>const Environment = {
    BASE_URL: "http://babylandworld.com:8000/"
  }
  
  export default Environment
  </code></pre>
  
  <p>I'm calling an API request from auth file inside api/lib/auth as:</p>
  
  <p><strong>api/lib/auth.js:</strong></p>
  
  <pre><code>/* eslint-disable import/prefer-default-export */
  import axiosInstance from "./axios"
  // Auth Request from backend api using axios
  const auth = async (username, password) =&gt; {
    const body = { username, password }
    const response = await axiosInstance
      .post(`/api/token/obtain/`, body)
      .then((res) =&gt; {
        axiosInstance.defaults.headers.Authorization = `JWT ${res.data.access}`
      })
    return response
  }
  export { auth }
  </code></pre>
  
  <p>I have dispatch the response from the api/auth.js file to auth/action.js. But I'm getting an error on dispatch and catch with no user data after submitting the login form.</p>
  
  <p>Here is action.js code:
  <strong>auth/action.js:</strong></p>
  
  <pre><code>import * as constants from "./constant"
  
  import { auth } from "../../api/lib/auth"
  
  const loginBegin = () =&gt; ({
    type: constants.LOGIN_BEGIN
  })
  const login = ({ username, password }) =&gt; (dispatch) =&gt; {
    dispatch({
      type: constants.LOGIN_SUCCESS,
      paylaod: auth(username, password).data
    }).catch(() =&gt;
      dispatch({
        type: constants.LOGIN_FAIL
      })
    )
  }
  
  export { loginBegin, login }
  </code></pre>
  
  <p>Also, I have created actions types in constant.js file as:</p>
  
  <p><strong>auth/constant.js:</strong> </p>
  
  <pre><code>export const REFRESH_TOKEN = "REFRESH_TOKEN"
  export const LOGIN_BEGIN = "LOGIN_BEGIN"
  export const LOGIN_SUCCESS = "LOGIN_SUCCESS"
  export const LOGIN_FAIL = "LOGIN_FAIL"
  export const AUTH_ERROR = "AUTH_ERROR"
  export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS"
  </code></pre>
  
  <p>Here is reducer file as:
  <strong>auth/reducer.js:</strong></p>
  
  <pre><code>import { actions } from "react-table"
  import * as constants from "./constant"
  
  const initialState = {
    token: localStorage.getItem("token"),
    isAuthenticated: null,
    isLoading: false,
    user: null
  }
  function authReducer(state = initialState, action) {
    switch (action.type) {
      case constants.LOGIN_BEGIN:
        return {
          ...state,
          isAuthenticated: false,
          isLoading: true,
          user: ""
        }
      case constants.LOGIN_SUCCESS:
        return {
          ...state,
          ...action.payload,
          isAuthenticated: true,
          isLoading: false
        }
      case constants.LOGIN_FAIL:
      case constants.LOGOUT_SUCCESS:
        return {
          ...state,
          token: null,
          isAuthenticated: false,
          user: null,
          isLoading: false
        }
      default:
        return state
    }
  }
  export default authReducer
  </code></pre>
  
  <p>This is our login page component as:
  <strong>pages/auth/loginTabset.js:</strong></p>
  
  <pre><code>/* eslint-disable jsx-a11y/anchor-has-content */
  /* eslint-disable jsx-a11y/anchor-is-valid */
  import React, { Component } from "react"
  
  import PropTypes from "prop-types"
  import { connect } from "react-redux"
  import { Redirect } from "react-router-dom"
  import { login } from "../../redux/auth/action"
  
  export class LoginTabset extends Component {
    state = {
      username: "",
      password: ""
    }
  
    clickActive = (event) =&gt; {
      document.querySelector(".nav-link").classList.remove("show")
      event.target.classList.add("show")
    }
  
    handleSubmit = (e) =&gt; {
      e.preventDefault()
      this.props.login(this.state.username, this.state.password)
    }
  
    handleChange = (e) =&gt; this.setState({ [e.target.name]: e.target.value })
  
    render() {
      if (this.props.isAuthenticated) {
        return &lt;Redirect to="/dashboard" /&gt;
      }
      const { username, password } = this.state
      return (
        &lt;div&gt;
          &lt;h4 className="text-center"&gt;Login Panel&lt;/h4&gt;
          &lt;hr /&gt;
          &lt;form
            className="form-horizontal auth-form"
            onSubmit={this.handleSubmit}&gt;
            &lt;div className="form-group"&gt;
              &lt;input
                required=""
                name="username"
                value={username}
                type="text"
                className="form-control"
                placeholder="Username"
                id="username"
                onChange={this.handleChange}
              /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;input
                required=""
                name="password"
                value={password}
                type="password"
                className="form-control"
                placeholder="Password"
                id="password"
                onChange={this.handleChange}
              /&gt;
            &lt;/div&gt;
            &lt;div className="form-terms"&gt;
              &lt;div className="custom-control custom-checkbox mr-sm-2"&gt;
                &lt;input
                  type="checkbox"
                  className="custom-control-input"
                  id="customControlAutosizing"
                /&gt;
                &lt;label className="d-block" htmlFor="chk-ani2"&gt;
                  &lt;input
                    className="checkbox_animated"
                    id="chk-ani2"
                    type="checkbox"
                  /&gt;
                  Reminder Me{" "}
                  &lt;span className="pull-right"&gt;
                    {" "}
                    &lt;a href="#" className="btn btn-default forgot-pass p-0"&gt;
                      lost your password
                    &lt;/a&gt;
                  &lt;/span&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="form-button"&gt;
              &lt;button className="btn btn-primary" type="submit"&gt;
                Login
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div className="form-footer"&gt;
              &lt;span&gt;Or Login up with social platforms&lt;/span&gt;
              &lt;ul className="social"&gt;
                &lt;li&gt;
                  &lt;a className="fa fa-facebook" href="" /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a className="fa fa-twitter" href="" /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a className="fa fa-instagram" href="" /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a className="fa fa-pinterest" href="" /&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  LoginTabset.propTypes = {
    login: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool.isRequired
  }
  
  const mapStateToProps = (state) =&gt; ({
    isAuthenticated: state.auth.isAuthenticated
  })
  export default connect(mapStateToProps, { login })(LoginTabset)
  </code></pre>
  
  <p>Problem:
  when submitting the login form, there is an error on dispatch an action from api/lib/auth and don't get any response data from the API server. </p>
  
  <p>Please, anyone, help to solve this problem as soon as possible.</p>