Axios React/Redux - not firing when using thunk action creator?

Question

I am trying to integrate thunk in effort to get redux to allow axios to make asynchronous calls to a back end API i have.

This is an existing project that is being moved over to adding in redux and typescript.

For some reason I cannot get the endpoint to be hit when using the recommend thunk action creator like this:

export const getAllCharacters = () => {
return (dispatch: Dispatch) => {
    axios.get(charactersAPI())
    .then(response => {
        dispatch(loadCharacters(response.data));
    })
}

}

If I remove the return (dispatch) = () => {} portion out and just have the axios request it works and hits the endpoint, however I cannot update anything.

I have thunk installed and can seemingly access other portions of the state no issues, I just cannot get this async portion to trigger.

store:

const store = createStore(
appReducers, 
compose((window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(thunk)));

I have a feeling this is being more difficult because I am attempting to both convert over to typescript and add in redux at the same time.

Any help would be appreciated, thanks.

How are you calling the action getAllCharacters? How did you bind it in mapDispatchToProps function? — Prathap Reddy
uh no it is not currently being called from a mapDispatchToProps. Which now that you mention it, would make a ton of sense. — Robert
If the function is not known by the store via dispatch then the middleware (thunk/saga) won't be aware of it. Hence it might not be giving results as expected. Remember there should be a chain link to connect things :-) — Prathap Reddy

Prathap Reddy Prathap Reddy · Accepted Answer · 2020-08-04T15:26:52

Try wrapping getAllCharacters inside mapDispatchToProps similar to below

mapDispatchToProps = (dispatch: Dispatch) => ({
  getAllCharacters: (...) => dispatch(getAllCharacters(...))
})

Axios React/Redux - not firing when using thunk action creator?

1 Answers