Action must be plain objects. Use custom middleware for async function. React Native

Question

I call getLocalToken action from my component which reads a string from AsyncStorage . The following is how I call the function.

componentWillMount() {
            this.props.getLocalToken();
            console.log("CWM", this.props.auth);
        }

The following is my Action

export const getLocalToken = async () => {
    try {
        const localToken = await AsyncStorage.getItem('@auth:localToken');
        const mobileNumber = await AsyncStorage.getItem('@auth:mobileNumber');
    }
    catch (e) {
        console.log('Failed to read token', e);
    }



    return (dispatch) => {
        console.log("get token");
        dispatch({
            type: types.GET_LOCALTOKEN_SUCCESS,
            payload: { localToken: this.localToken, mobileNumber: this.mobileNumber }
        });
    }
}

For this code I get Action must be plain objects. Use custom middleware for async function. error.

The error message seems pretty self-descriptive, what seems to be the issue? — Etheryte
– Etheryte, Commented Sep 13, 2017 at 13:12
I couldn't figure it out as I am new to Javascript and React Native — AH.
– AH., Commented Sep 13, 2017 at 13:16
To rephrase the error message, default actions don't support async operations. You will need to use custom middleware if you want to make your actions async, a commonly used option is Redux Thunk. — Etheryte
– Etheryte, Commented Sep 13, 2017 at 13:17

mradziwon · Accepted Answer · 2017-09-13 13:31:07Z

2

Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants. Please read redux-documentation for more information.

If you want an async request or other side effects you must use middleware. Most popular are:

All of them handle async requests in a different way. Redux-thunk is beginner friendly but in my opinion pain for complicated projects and testing.

edited Sep 13, 2017 at 13:31

answered Sep 13, 2017 at 13:19

mradziwon

1,2361 gold badge9 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Action must be plain objects. Use custom middleware for async function. React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related