score:0

Accepted answer

I managed to figure it out - after a very long chat with @Glitch100 (thanks!). I needed to return the dispatch of requestVehicleLookup just after the axios promise was created. Like so:

export function fetchVehicleLookup(vrm: string, jwt: string) {
	return function (dispatch) {
		axios.create({
			timeout: 4000,
		})
			.post('/*api url*', {
				action: '*method*',
				body: { vrm },
			})
			.then(response => response.data)
			.then(json => dispatch(receiveVehicleData(json)))
			.catch(error => dispatch(receiveVehicleDataFailure(error)));
      
      
		return dispatch(requestVehicleLookup());
	};
}

score:3

First thought was that your fetchVehicleLookup action was moaning because you are returning the axios instead of just dispatching within.

export function fetchVehicleLookup(vrm: string, jwt: string) {
    return function (dispatch) {
        dispatch(requestVehicleLookup());

        axios.create({
            timeout: 4000,
        })
            .post('/*api url*', {
                action: '*method*',
                body: { vrm },
            })
            .then(response => response.data)
            .then(json => dispatch(receiveVehicleData(json)))
            .catch(error => dispatch(receiveVehicleDataFailure(error)));
    };
}

Simply remove the return statement that is in your action, as it's returning whatever object axios represents, which I imagine is going to be some form of Promise.

Second thought could be something around your store setup because it sounds like thunk isn't actually working.


Related Query

More Query from same tag