Axios React/Redux - 使用 thunk 动作创建器时不触发？

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.

Answer 1

Try wrapping getAllCharacters inside mapDispatchToProps similar to below

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