Package Exports

redux-thunk-plus

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-thunk-plus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

redux-thunk-plus

Advanced thunk middleware for Redux

Simple thunk

const INCREMENT_COUNTER = "INCREMENT_COUNTER";

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

Advanced thunk

const DATA_LOADING = "DATA_LOADING";
const DATA_LOADED = "DATA_LOADED";

function fetchData(keyword = "Hi") {
  return fetch(`https://www.google.com/search?q=${keyword}`).then(res =>
    res.text()
  );
}

function loadData1() {
  return {
    // support promise factory
    $async: fetchData,
    before: () => ({ type: DATA_LOADING }),
    after: () => ({ type: DATA_LOADED })
  };
}

function loadData2() {
  return {
    // support promise object
    $async: fetchData("Xiao"),
    before: () => ({ type: DATA_LOADING }),
    after: () => ({ type: DATA_LOADED })
  };
}

function loadData3() {
  return {
    // support multiple promises/promise factories
    $async: [fetchData("Xiao"), fetchData("Hi")],
    before: () => ({ type: DATA_LOADING }),
    after: () => ({ type: DATA_LOADED }),
    success: payloads => console.log(payloads)
  };
}