Using redux-thunk in react-native with async dispatch

Question

I have redux-thunk set up in my react-native code.

In mapDispatchToProps I have:

const mapDispatchToProps = dispatch => {
     return {
         login: (state, navigator) => dispatch({
             type: "USER",
             payload: loginFunc(state, navigator)
          }),
     }'
}

The login function is a firebase function that returns a promise chain that eventually returns the object I need.

However, in my reducer it looks like my payload is a promise or some funky object. It looks like:

{ 
     a: someVal, 
     b: sommeOtherVal, 
     c: someMoreVal,
     ...ValsUpToI.
     i: {
       // The values I actually need show up
     }

This messes me up because when I try to do payload.myValue I get undefined in my redux state. I don't think it is safe to just do payload.i either because this is probably some promise or async issue right? That i could very well be something else later?

Shahzad · Accepted Answer · 2018-04-01 08:06:41Z

1

Use asynchronous actions approach to execute promise based function API calls as mentioned in redux documentation.

const mapDispatchToProps = dispatch => {
 return {
     login: (state, navigator) => {
         return loginFunc(state, navigator).then(
             response => dispatch({
                 type: "USER",
                 payload: response
             }),
             error => console.log('An error occurred.', error)
        )
     }
 }

That way you can call promise based function and utilize response or error correctly.

answered Apr 1, 2018 at 8:06

Shahzad

1,4154 gold badges24 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Using redux-thunk in react-native with async dispatch

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