CODEWITHSUNDEEP
react-nativereduxreact-reduxredux-thunk
tmas
tmas

Reputation: 442

Asynchronous redux thunk requires wrapoer function

My redux thunk requires a wrapper function. (My mockstore in jest does not need it) Thunk is added as middleware in my store

Action that works:

export function getSettings (establishmentId: string) {
    return (dispatch: any) => {
        return () => {
            dispatch(settingsLoading())
            Client
                .getSettings(establishmentId)
                .then((settings: ISettings) => {
                    dispatch(getSettingsSuccess(settings))
                })
        }
    }
}

Dispatch:

dispatch(getSettings(establishmentId))

Action that does not work (but it does in my jest test):

export function getSettings (establishmentId: string) {
    console.log('GET SETTINGS')
    return (dispatch: any) => {
        dispatch(settingsLoading())
        return Client
            .getSettings(establishmentId)
            .then((settings: ISettings) => {
                // dispatch(getSettingsSuccess(settings))
            })
    }
}

When I do it without the wrapper function it tells me I should apply the thunk middleware (which I did)

return createStore(
        rootReducer,
        composeEnhancers(
            applyMiddleware(thunk)
        )
    )

Upvotes: 0

Views: 62

Answers (1)

tmas
tmas

Reputation: 442

Found the answer, we made a mistake in our mapDispatchToProps and used a combination of bindActionCreators and just returning an object list:

const mapDispatchToProps = (dispatch: any) => bindActionCreators(
    {
        getSettings: (establishmentId: string) => dispatch(getSettings(establishmentId))
    },
    dispatch
)

should have been:

const mapDispatchToProps = (dispatch: any) => {
    getSettings: (establishmentId: string) => dispatch(getSettings(establishmentId))
}

Upvotes: 1

Related Questions