Pfthb

I have a thunk using Axios that's posting to an Express route using Sequelize.

The route is posting correctly (ie. data is getting added to the db) but the action inside of the React component isn't behaving as expected. Using async/await, I expect the action to wait until it completes the db post before continuing but that's not the case here. I'm getting undefined from the action.

The thunk hits the express route where I'm dispatching the action to update my redux store and returning the response:

const addedNewList = (newList) => (type: ADD_NEW_LIST, newList)

export const addNewList = (name, userId) => async dispatch => 
 try 
 const data = await axios.post('/api/list/add', name, userId )
 dispatch(addedNewList(data))
 return data
 catch (err) 
 console.error(err)
 

Using debugger, I can confirm that return data is in fact returning the response from the server that I need. I can also confirm that the redux store is getting updated correctly.

But here, when I try and access that response data as result, I get undefined:

 handleSubmit = async () => 
 const result = await this.props.addNewList(this.state.name, this.props.userId)

 // ** result is 'undefined' **

 this.handleClose()

 // pass off the results
 

If I add a setTimeout after I evoke the addNewList action, it works as expected. This suggests to me that maybe it's not returning a promise? But my understanding was that if you returned the response from the server in the thunk, it would do that.

For completeness, here is my route which I've also confirmed with debugger that data is being passed as expected:

const userAuth = function(req, res, next) 
 if (req.isAuthenticated()) 
 return next()
 
 res.status(401).send('Unauthorized user')


router.post('/add', userAuth, async (req, res, next) => 
 const name, userId = req.body
 try 
 const list = await List.create( name, userId )
 res.json(list)
 catch(err) next(err) 
)

Why is the action returning undefined in the handleSubmit method?

Try returning the dispatch of addedNewList(data) instead:

export const addNewList = (name, userId) => async dispatch => 
 try 
 const data = await axios.post('/api/list/add', name, userId )
 return Promise.resolve(dispatch(addedNewList(data)));
 catch (err) 
 console.error(err)
 

That being said, you could consider restructuring the component to instead utilize mapStateToProps to use values/result from the updated Redux store rather than explicitly awaiting the response and manually passing the value?

The response from Alexander got me on the right track so I'm sharing my solution in case it helps someone (as he suggested).

While I could have continued to try and solve this by wrapping the dispatch in a Promise, the better solution was to rethink how the component was structured.

In my situation, I wanted to get the ID for the newly created row in the database so that I could pass it into history.push.

 handleSubmit = async () => 
 const result = await this.props.addNewList(this.state.name, this.props.userId)

 this.handleClose()

 history.push(`/list/$result.id`)

With result coming back undefined, the url was not updating correctly.

The better solution was to access the new data from the redux store where it was updated. This way I could be certain the history wouldn't get updated until the data was ready.

So my updated component now looked something like this where the history wouldn't update until a newId was available:

 handleSubmit = () => 
 this.props.addNewList(this.state.name, this.props.userId)
 this.handleClose()
 

 render()
 const newId = this.props

 if (newId) 
 history.push(`/list/$newId`)
 

 return (
 ....
 )
 
}

const mapStateToProps = (state) => 
 return 
 newId: state.list.newId
 

Instead of putting this into render, I could probably also use a component lifecylcle method like componentWillReceiveProps or similar.