0

I wrote a redux thunk so that after making a post request to an API an action gets dispatched and a callback gets executed:

import actionTypes from '../actions/actionTypes';
import axios from 'axios';

function postThunk(someValue, callback) {
 return dispatch => {
    try {
        let token = localStorage.getItem('token');
        const credentials = {
            headers: {
                "Authorization" : 'Bearer '+ token,
              },
            };
        const data = {
            someValue
        }
        axios.post('http://myAPI',data, credentials).then(result =>{
            dispatch({
                type: actionTypes.MY_ACTION,
                data: result,
            })
        });
        callback();
    } catch (error) {
        console.log(error);
    }
}
}

export{
 postThunk
};

The callback when i invoke the thunk is actually then just a this.props.history.push(/somelocation). So as written above it works, but I actually want the callback be inside the axios.post promise chain, because the redicrect should only happen after the POST request. Hoewever if I change the code to this:

            axios.post('http://myAPI',data, credentials).then(result =>{
            dispatch({
                type: actionTypes.MY_ACTION,
                data: result,
            });
            callback();
        });

Somehow it doesn´t work anymore. The POST request is happening and the DB gets updated but instead of redirecting the same page gets a hard reload, which makes it also very difficult to debug because i dont really see what´s happening. Does anyone has an idea what i need to look after, is it the dispatch throwing an error or do i need a redux promise middleware at this point??

Sebs030
  • 566
  • 2
  • 4
  • 19
  • Could you remove the callback entirely? MY_ACTION is dispatched when the POST returns, so the store is updated, and some container/component is presumably connected to that with a mapStateToProps, so you know that component renders when the POST returns. You could include an additional payload on MY_ACTION if necessary. – TrueWill Jul 27 '18 at 11:12
  • No, that will not work: Here is the component side of the code. It is a button wich handles a formChange and sends the form data to the DB via the post request. Only after this is finished the redicrect should happen: `buttonPostData = () => { this.props.postThunk(this.state.data, () => this.props.history.push('/someRoute')) } ` – Sebs030 Jul 27 '18 at 12:05
  • Reload part is weird. I can't reproduce the same problem with custom `history`. Working simple code: https://codesandbox.io/s/4x667xz1zw You can see URL changes to ".../foo". I think you are using React Router right? – devserkan Jul 27 '18 at 15:40
  • After drilling down further into the topic i am able to narrow the issue down to something with axios.post not working properly. Forget about calling dispatch and the callback and just try a simple ´console.log(result)´, and it won´t work. So there must be something in resolving the promise of ´axios.post´ that causes a crash, but after the post to the api has been actually successfully accomplished since the entries are making it to the DB. Yes, I am using rect router – Sebs030 Jul 27 '18 at 15:50
  • Ok, so the problem can't be related to React Router then. I hope you find it. – devserkan Jul 27 '18 at 16:30

0 Answers0