Actions must be plain objects. Use custom middleware for async actions. React native

Question

I have a function fundBalance action function get called and inside of this function there and api call and after the api call resolved and i call the handleFundBalanceSuccess this error happens "Actions must be plain objects. Use custom middleware for async actions. React native"

    export function fundBalance(navigation) {
        return async (dispatch) => {
            dispatch({
                type: Fund_Balance_START
            })
            let response = await api.Fund_Balance(),
                responseJson = await response.json();
            if(response.status == 200){
                dispatch(handleFundBalanceSuccess(responseJson, navigation, dispatch)) // this line return Actions must be plain objects. Use custom middleware for async actions
            }
        }
    }

and the handleFundBalanceSuccess

handleFundBalanceSuccess = (response, navigation, dispatch) => {
    dispatch({
        type: Fund_Balance_SUCESS,
    })
    navigation.navigate('MessageScreen', {
        title: 'Success',
        description: response.status,
        doneClick: this.fundBalanceOrCashOutSuccessAction.bind(this, navigation),
    })
}

remove dispatch(handle....) to handleFundBalanceSuccess(responseJson, navigation, dispatch) — Ashwith Saldanha
– Ashwith Saldanha, Commented Jul 2, 2020 at 13:35

himayan · Accepted Answer · 2020-07-02 18:53:46Z

1

For dispatching functions, you would need redux-thunk middleware. Without this middleware, dispatch would only expect object parameters.

For more details on redux-thunk and how to implement it, you can check here - https://github.com/reduxjs/redux-thunk#motivation

However, in this case, you don't need to dispatch the function. Just calling the function would solve this.

edited Jul 2, 2020 at 18:53

answered Jul 2, 2020 at 14:22

himayan

8424 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramin Mammadzada · Accepted Answer · 2021-04-17 09:41:45Z

0

Inside the handleFundBalanceSuccess method you need to return plain object. For example this one in your case:

handleFundBalanceSuccess = (response, navigation, dispatch) => {
. . . . .
. . . . .
. . . . .
  return {
   type: Fund_Balance_SUCESS,
  };
}

answered Apr 17, 2021 at 9:41

Ramin Mammadzada

3674 silver badges11 bronze badges

Collectives™ on Stack Overflow

Actions must be plain objects. Use custom middleware for async actions. React native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related