CODEWITHSUNDEEP
redux
Sławomir Rosiek
Sławomir Rosiek

Reputation: 4073

Make ajax call after state change

I want to implement checkbox-based filtering on my page. When I click on checkbox I want to change state and make ajax call based on checked items.

I have created toggleCheckbox(id) action and reducer that adds/removes id from selected items, but I have no idea where should I place ajax call.

Any ideas?

Upvotes: 0

Views: 50

Answers (2)

JCE
JCE

Reputation: 118

Your component should dispatch the async action, to avoid duplicating the logic for toggling the selected items move it to the async action and change the normal action from toggle to set. Like this:

const toggleCheckbox = id => (dispatch, getState) => {
    const items = toggle(id, getState().selectedItems);
    dispatch(setSelectedItems(items));
    // call API with "items"
};

Upvotes: 1

Carlos C
Carlos C

Reputation: 677

Network calls are asynchronous, and actions are by default synchronous. They are just plain objets. To handle asynchronous behaviour you need a side-effect library like redux-sagas or redux-thunks. Take a look at https://redux.js.org/docs/advanced/AsyncActions.html and https://redux-saga.js.org

Upvotes: 0

Related Questions