how to async/await redux-thunk actions?

Question

action.js

export function getLoginStatus() {
  return async(dispatch) => {
    let token = await getOAuthToken();
    let success = await verifyToken(token);
    if (success == true) {
      dispatch(loginStatus(success));
    } else {
      console.log("Success: False");
      console.log("Token mismatch");
    }
    return success;
  }
}

component.js

  componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
      .then((success) => {
        if (success == true) {
          Actions.counter()
        } else {
          console.log("Login not successfull");
        }
     });
   }

However, when I write component.js code with async/await like below I get this error:

Possible Unhandled Promise Rejection (id: 0): undefined is not a function (evaluating 'this.props.dispatch(splashAction.getLoginStatus())')

component.js

  async componentDidMount() {
     let success = await this.props.dispatch(splashAction.getLoginStatus());
     if (success == true) {
       Actions.counter()
     } else {
       console.log("Login not successfull");
     }
   }

How do I await a getLoginStatus() and then execute the rest of the statements? Everything works quite well when using .then(). I doubt something is missing in my async/await implementation. trying to figure that out.

Cindy

did you ever get this pattern worked out? if so could you post the answer here? – Lalia

Why are you waiting for a promise in a redux connected react component? This is breaking the data uni direction pattern – Evangelize

I think there might be an issue with changing componentDidMount to async function and using the this keyword. It seems like this is now referring to the function and no longer the class component. – Kelsiekelso

Answer 1

The Promise approach

export default function createUser(params) {
  const request = axios.post('http://www...', params);

  return (dispatch) => {
    function onSuccess(success) {
      dispatch({ type: CREATE_USER, payload: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: ERROR_GENERATED, error });
      return error;
    }
    request.then(success => onSuccess, error => onError);
  };
}

The async/await approach

export default function createUser(params) {  
  return async dispatch => {
    function onSuccess(success) {
      dispatch({ type: CREATE_USER, payload: success });
      return success;
    }
    function onError(error) {
      dispatch({ type: ERROR_GENERATED, error });
      return error;
    }
    try {
      const success = await axios.post('http://www...', params);
      return onSuccess(success);
    } catch (error) {
      return onError(error);
    }
  }
}

Referenced from the Medium post explaining Redux with async/await: https://medium.com/@kkomaz/react-to-async-await-553c43f243e2

Overplus

Why return success or return error? Redux doesn't seem to use these? – Analysis

I'm not sure if the behavior in both examples are the same. In the Promise approach, an exception inside the onSuccess call would not be caught. In async/await approach, an exception inside the onSuccess call would be caught. This onSuccess call wraps all the redux state-change and the react re-render, any error resulted in this code would be swallowed. They talked about this here: github.com/facebook/react/issues/6895 – Afterdamp

Answer 2

Remixing Aspen's answer.

import axios from 'axios'

import * as types from './types'

export function fetchUsers () {
  return async dispatch => {
    try {
      const users = await axios
        .get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => res.data)

      dispatch({
        type: types.FETCH_USERS,
        payload: users,
      })
    } catch (err) {
      dispatch({
        type: types.UPDATE_ERRORS,
        payload: [
          {
            code: 735,
            message: err.message,
          },
        ],
      })
    }
  }
}

 

import * as types from '../actions/types'

const initialErrorsState = []

export default (state = initialErrorsState, { type, payload }) => {
  switch (type) {
    case types.UPDATE_ERRORS:
      return payload.map(error => {
        return {
          code: error.code,
          message: error.message,
        }
      })

    default:
      return state
  }
}

This will allow you to specify an array of errors unique to an action.

Analysis

Answer 3

Another remix for async await redux/thunk. I just find this a bit more maintainable and readable when coding a Thunk (a function that wraps an expression to delay its evaluation ~ redux-thunk )

actions.js

import axios from 'axios'
export const FETCHING_DATA = 'FETCHING_DATA'
export const SET_SOME_DATA = 'SET_SOME_DATA'

export const myAction = url => {
  return dispatch => {
    dispatch({
      type: FETCHING_DATA,
      fetching: true
    })
    getSomeAsyncData(dispatch, url)
  }
}

async function getSomeAsyncData(dispatch, url) {
  try {
    const data = await axios.get(url).then(res => res.data)
    dispatch({
      type: SET_SOME_DATA,
      data: data
    })
  } catch (err) {
    dispatch({
      type: SET_SOME_DATA,
      data: null
    })
  }
  dispatch({
    type: FETCHING_DATA,
    fetching: false
  })
}

reducers.js

import { FETCHING_DATA, SET_SOME_DATA } from './actions'

export const fetching = (state = null, action) => {
  switch (action.type) {
    case FETCHING_DATA:
      return action.fetching
    default:
      return state
  }
}

export const data = (state = null, action) => {
  switch (action.type) {
    case SET_SOME_DATA:
      return action.data
    default:
      return state
  }
}

Cleanlimbed

Answer 4

Possible Unhandled Promise Rejection

Seems like you're missing the .catch(error => {}); on your promise. Try this:

componentDidMount() {
    this.props.dispatch(splashAction.getLoginStatus())
        .then((success) => {
            if (success == true) {
                Actions.counter()
            } else {
                console.log("Login not successfull");
            }
        })
        .catch(err => {
            console.error(err.getMessage());
        }) ;
}

Hardhack

Answer 5

use dispatch(this.props.splashAction.getLoginStatus()) instead this.props.dispatch(splashAction.getLoginStatus())

Geology

It is helpful to explain the changes you suggest in answers, please expand your answer, don't make it just "do this" or "try this" – Greeneyed