CODEWITHSUNDEEP
reduxjsxredux-thunk
fox
fox

Reputation: 16496

Redux-thunk not dispatching actions

I have a a pair of Redux actions that I want to dispatch when a button is pressed. One of these should take a list of services and perform reducer logic on it, and the other should just trigger some logic in the reducer:

function retrieveServices(services) {
    return {
        type: RETRIEVE_SERVICES,
        services,
    };
}

function toggleSubmitState() {
    return {
        type: TOGGLE_SUBMIT_STATE,
    };
}

I have the following action that I assumed would do the trick:

export function submitGameplan(services) {
    return (dispatch => {
        dispatch(toggleSubmitState());
        dispatch(retrieveServices(services));
    };
}

This is how I call it in my component:

    const { submitter, dispatch, services } = this.props;

    const submitWithServices = () => {
        dispatch(submitter(services));
    };

    return (
      <div>

        <button onClick={submitWithServices}>
            <div>Submit</div>
        </button>

      </div>
    );

where the submitter action being passed in is submitGameplan.

Although redux-thunk seems to be picking up the action and firing it (I'm getting console.log output), it's not dispatching the actions.

Aside from the (likely) possibility that I am mis-calling the function in my action, perhaps there is some issue with the fact that I have done this in my main App-level component:

const boundActions = bindActionCreators(actions, dispatch);

and then passed all actions as boundActions, so i.e. my component would get boundActions.submitGameplan.

Still, I'm not certain why this action wouldn't dispatch either of the two actions as written.

Upvotes: 0

Views: 501

Answers (1)

fox
fox

Reputation: 16496

Turns out that this worked after a recompile, no idea why it didn't work before.

Upvotes: 1

Related Questions