How to use the redux-tools.createThunkAction function in redux-tools

.then((userAreas = []) => {
        dispatch(setUserAreas(userAreas));
        dispatch(setUserAreasLoading(false));
      })
      .catch((err) => {
        dispatch(setUserAreasError(err));
        toastr.error('Error loading user areas', err);
      });
  });

// actions – datasets
export const setDatasets = createAction('SUBSCRIPTIONS__SET-DATASETS');
export const setDatasetsLoading = createAction('SUBSCRIPTIONS__SET-DATASETS-LOADING');
export const setDatasetsError = createAction('SUBSCRIPTIONS__SET-DATASETS-ERROR');

export const getDatasets = createThunkAction('SUBSCRIPTIONS__GET-DATASETS', () =>
  (dispatch, getState) => {
    const { common } = getState();
    const { locale } = common;
    const datasetService = new DatasetService(null, {
      apiURL: process.env.WRI_API_URL,
      language: locale
    });

    dispatch(setDatasetsLoading(true));

    datasetService.getSubscribableDatasets('metadata')
      .then((datasets = []) => {
        const parsedDatasets = WRISerializer({ data: datasets });
        dispatch(setDatasets(parsedDatasets));
        dispatch(setDatasetsLoading(false));
      })

import 'isomorphic-fetch';
import { createAction, createThunkAction } from 'redux-tools';

// Actions
export const setWidget = createAction('WIDGET-DETAIL/setWidget');
export const setWidgetLoading = createAction('WIDGET-DETAIL/setWidgetLoading');
export const setWidgetError = createAction('WIDGET-DETAIL/setWidgetError');

// Async actions
export const fetchWidget = createThunkAction('WIDGET-DETAIL/fetchWidget', (payload = {}) => (dispatch) => {
  dispatch(setWidgetLoading(true));
  dispatch(setWidgetError(null));

  return fetch(new Request(`${process.env.WRI_API_URL}/widget/${payload.id}`))
    .then((response) => {
      if (response.ok) return response.json();
      throw new Error(response.statusText);
    })
    .then(({ data }) => {
      dispatch(setWidgetLoading(false));
      dispatch(setWidgetError(null));
      dispatch(setWidget({ id: data.id, ...data.attributes }));
    })
    .catch((err) => {
      dispatch(setWidgetLoading(false));
      dispatch(setWidgetError(err));

fetchGLADLatest,
  fetchFormaLatest,
  fetchTerraLatest,
  fetchSADLatest,
  fetchGranChacoLatest
} from 'services/alerts';

import thresholdOptions from 'data/thresholds.json';

import { reduceParams, reduceSqlParams } from './datasets-utils';
import decodeLayersConfig from './datasets-decode-config';

export const setDatasetsLoading = createAction('setDatasetsLoading');
export const setDatasets = createAction('setDatasets');

export const getDatasets = createThunkAction(
  'getDatasets',
  () => (dispatch, getState) => {
    const state = getState();
    if (!state.datasets.datasets.length) {
      dispatch(setDatasetsLoading({ loading: true, error: false }));
      axios
        .all([
          getDatasetsProvider(),
          fetchGLADLatest(),
          fetchFormaLatest(),
          fetchTerraLatest(),
          fetchSADLatest(),
          fetchGranChacoLatest()
        ])
        .then(
          axios.spread((allDatasets, glads, forma, terra, sad, granChaco) => {

import wriAPISerializer from 'wri-json-api-serializer';
import flatten from 'lodash/flatten';
import sortBy from 'lodash/sortBy';
import chroma from 'chroma-js';

import { getDatasetsProvider } from 'services/datasets';
import thresholdOptions from 'data/thresholds.json';

import { reduceParams, reduceSqlParams } from './datasets-utils';
import decodeLayersConfig from './datasets-decode-config';
import decodeLayersClusters from './datasets-decode-clusters';

export const setDatasetsLoading = createAction('setDatasetsLoading');
export const setDatasets = createAction('setDatasets');

export const getDatasets = createThunkAction('getDatasets', () => dispatch => {
  getDatasetsProvider()
    .then(allDatasets => {
      const parsedDatasets = wriAPISerializer(allDatasets.data)
        .filter(
          d =>
            d.published &&
            d.layer.length &&
            (d.env === 'production' || d.env === process.env.FEATURE_ENV)
        )
        .map(d => {
          const { layer, metadata } = d;
          const appMeta =
            (metadata && metadata.find(m => m.application === 'gfw')) || {};
          const { info } = appMeta || {};
          const defaultLayer =
            (layer &&

visible: true,
          layers: [{
            active: true,
            id: data.id,
            ...data.attributes
          }]
        }]
      }));
    })
    .catch((err) => {
      dispatch(setLayersLoading({ id, value: false }));
      dispatch(setLayersError({ id, value: err }));
    });
});

export const fetchWidget = createThunkAction('WIDGET_BLOCK_FETCH_DATA', (payload = {}) => (dispatch) => {
  const id = `${payload.id}/${payload.itemId}`;

  dispatch(setWidgetLoading({ id, value: true }));
  dispatch(setWidgetError({ id, value: null }));

  fetch(`${process.env.WRI_API_URL}/widget/${payload.id}?&application=${process.env.APPLICATIONS}&includes=${payload.includes}`)
    .then((response) => {
      if (response.status >= 400) throw Error(response.statusText);
      return response.json();
    })
    .then(({ data }) => {
      const widget = { id: data.id, ...data.attributes };
      const { widgetConfig } = widget;

      dispatch(setWidgetLoading({ id, value: false }));
      dispatch(setWidgetError({ id, value: null }));