Redux Asynchronous Actions - andrewkyllo-401-advanced-javascript/seattle-javascript-401d34 GitHub Wiki

Thunking for Data...

• Using Redux actions to connect to remote APIs via Thunk Middleware
• Sometimes we need actions to do some asynchronous action before you dispatch it to the reducer

let api = 'https://api.mockable.io/api/v1/stuff';

export const get = () => dispatch => {
  return utils.fetchData(api).then(records => {
    dispatch(getAction(records));
  });
};

const getAction = payload => {
  return {
    type: 'GET',
    payload: payload,
  };
};

• Thunk inspect every dispatched action then either lets it go through or it processes the function and then dispatches what that function returns.

Thunk middlewre:

export default store => next => action =>
  typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action);