React dispatch a method in async call

Question

How to dispatch the redux function in react async call. When I call the dispatch function dispatch(updatingcontact(), I'm getting error that dispatch is not defined.

const UpdateContact = async (URL, method, type, address) => {
dispatch(updatingcontact()
const APIResponse = await fetch(URL, {
    method: POST,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    body: JSON.stringify({
        "webContacts": {
            "address": address
        }
    })
})
    .then(response => {
        if (!response.ok) {
            return Promise.reject(response.statusText);
        }
        return response.json();
    })
    .then(status => {
        return status
    })
    .catch(error => {
        console.log(error);
    });
}

I just want to call the updatingcontact() function inside the UpdateContact and call the reducer to display the updating message in UI.

function updatingcontact() {
return {
    type: ACTIONTYPES.UPDATING_CONTACT
 }
}

You can use [redux thunk](https://github.com/reduxjs/redux-thunk) — HMR, Mar 20 '20 at 14:17
@HMR I'm getting this error `Syntax error: await is a reserved word` while using `return (dispatch) => {dispatch(updatingcontact())}`. — Maria Jeysingh Anbu, Mar 20 '20 at 14:23
check this out this as an async middleware [HERE](https://www.npmjs.com/package/async-dispatch) — Ibrahim shamma, Mar 30 '21 at 12:14

akhildhiman · Accepted Answer · 2020-03-21T07:57:51.500

You need to use some async middleware like redux-thunk to make asynchronous API calls. Using redux's higher order function connect will connect your React component to the redux store.

Your thunk would look something like this:

Note that Redux will pass dispatch argument to the thunk function for dispatching actions.

export const updatingContact = (url, address) => {
  return async (dispatch) => { 
    dispatch({ type: ACTIONTYPES.UPDATING_CONTACT_STARTS }) // for showing spinner or loading state in your component

    try {
      const response = axios.post(url, {
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },

        body: JSON.stringify({
          webContacts: {
            address: address
          }
        })
      })

      dispatch({
        type: ACTIONTYPES.UPDATING_CONTACT_SUCCESS,
        data: { updatedContactList: response.data.updatedContactList }
      })
    } catch (error) {
      dispatch({
        type: ACTIONTYPES.UPDATING_CONTACT_ERROR,
        data: { error: error }
      })
    }
  }
}

After that, whatever your component needs, it's availble in the redux store. To dispatch from your UpdateContact component, you just need to do this:

import { updatingContact } from "./actions.js" 

class UpdateContact extends Component {

  componentDidMount() {
      this.props.dispatch(updatingContact()) 
  }

  render() { 
    const {address, phoneNumber } = this.props
    return (
      <div>
        Adress: {address}
        Phone No.: {phoneNumber}
      </div>
    )
  }


const mapStateToProps = () => {
  // return whatever you need from the store like contact details, address, etc
  address: state.updatingContactReducer.address,
  phoneNumber: state.updatingContactReducer.phoneNumber
}

export default connect(mapStateToProps)(UpdateContact)

Notice that if you don't provide mapDispatchToProps to connect, you will still be able to use dispatch in your component because it's available by default.

If you provide mapDispatchToProps, the way you would now dispatch from your component would be- this.props.updatingContact().

mapDispatchToProps just binds action creators with dispatch and pass these new bound functions as props to the component.

Charles dB · Answer 2 · 2020-03-20T15:15:13.307

2

As mentionned by HMR, you should use redux-thunk to have async calls in redux actions.

The easiest is to have a look at redux toolkit that is installing all standard redux middlewares for you (including redux-thunk)

edited Mar 20 '20 at 15:15

answered Mar 20 '20 at 14:42

Charles dB

619
5
12

React dispatch a method in async call

2 Answers2