advanced-action-creators.md

Advanced actionCreators

Additionally, Since redux-thunk is a dependency of Reduxful, it is also for use for some advanced situations. The actionCreators generated by Reduxful can be used for polling or chaining along with other dispatch-able actions.

Chaining actionCreators

Continuing with our doodadApi from the advanced setups, let's say we want to be able to create a new doodad, and refresh our list of them, all with one actionCreator.

import { doodadApi } from './doodadApi';
import store from './store';

const { createDoodad, getDoodadList } = doodadApi.actionCreators;

function createAndListDoodad(body) {
  return dispatch => {
    return dispatch(createDoodad(null, { body }))
      .then(() => dispatch(getDoodadList()));
  };
}

store.dispatch(createAndListDoodad({ name: 'my-doodad' }));

Handling response actions

Now in this example, we will create a doodad, then inspect the response action, to see how the payload compares to our request. Action objects in Reduxful follow the Flux Standard Action design.

import { doodadApi } from './doodadApi';
import store from './store';

const { createDoodad } = doodadApi.actionCreators;

function createAndVerifyDoodad(body) {
  return dispatch => {
    return dispatch(createDoodad(null, { body }))
      .then(responseAction => {
          // the response body will be in the action payload
          const { payload } = responseAction;
          if (payload.name !== body.name) {
            // Oops, the API didn't save the name like we ask!!!
            console.warn('Malformed doodad name');
          }
        }
      );
  };
}

store.dispatch(createAndVerifyDoodad({ name: 'my-doodad' }));

Generally, for case like this where you want to display a result of your request it would be better to listen and select the createDoodad resource from state. However, this example introduces how you could use response actions to conditionally execute additional actionCreators, as we will see next.

Polling actionCreators

Now, let's say we want to perform some action on our doodad which happens asynchronously on the API, thus requiring us to poll for its results. Let's use our update endpoint, that will tell someone in our doodad warehouse to get a certain doodad packaged up for shipping or something. From the warehouse, someone will mark the requested doodad as packaged when they finish, then the API will update it. From our side, we will poll that doodad until completion, checking an isPackaged attribute.

import { doodadApi } from './doodadApi';
import store from './store';
const { updateDoodad, getDoodad } = doodadApi.actionCreators;
function pollDoodadPackaging(id) {
  return dispatch => {
    return dispatch(getDoodad({ id }))
      .then(responseAction => {
          const { error, payload } = responseAction;
          // check if doodad is packaged yet        
          if (!error && !payload.isPackaged) {
            // if not, then in 5 seconds, ask again          
            setTimeout(() => {
              dispatch(pollDoodadPackaging(id));
            }, 5000);
          }
        }
      );
  };
}
function packageAndPollDoodad(id) {
  const body = { package: true };
  return dispatch => {
    return dispatch(updateDoodad({ id }, { body }))
      .then(() => dispatch(pollDoodadPackaging(id)));
  };
}
store.dispatch(packageAndPollDoodad('123'));

From here

View the API docs for more details.