How to use redux-tools - 10 common examples

.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));

// Actions
export const SET_WIDGETS = 'SET_WIDGETS';
export const SET_LOADING = 'SET_LOADING';
export const SET_ERROR = 'SET_ERROR';
export const SET_TAB = 'SET_TAB';
export const SET_PAGE = 'SET_PAGE';
export const SET_PAGES = 'SET_PAGES';
export const SET_PAGE_SIZE = 'SET_PAGE_SIZE';
export const SET_TOTAL = 'SET_TOTAL';
export const SET_SEARCH = 'SET_SEARCH';

export const setWidgets = createAction(SET_WIDGETS);
export const setLoading = createAction(SET_LOADING);
export const setError = createAction(SET_ERROR);
export const setTab = createAction(SET_TAB);
export const setPage = createAction(SET_PAGE);
export const setPages = createAction(SET_PAGES);
export const setPageSize = createAction(SET_PAGE_SIZE);
export const setTotal = createAction(SET_TOTAL);
export const setSearch = createAction(SET_SEARCH);

export default {
  setWidgets,
  setLoading,
  setError,
  setTab,
  setPage,
  setPages,
  setPageSize,
  setTotal,
  setSearch
};

import { createAction } from 'redux-tools';

// Actions
export const SET_WIDGETS = 'SET_WIDGETS';
export const SET_LOADING = 'SET_LOADING';
export const SET_ERROR = 'SET_ERROR';
export const SET_TAB = 'SET_TAB';
export const SET_PAGE = 'SET_PAGE';
export const SET_PAGES = 'SET_PAGES';
export const SET_PAGE_SIZE = 'SET_PAGE_SIZE';
export const SET_TOTAL = 'SET_TOTAL';
export const SET_SEARCH = 'SET_SEARCH';

export const setWidgets = createAction(SET_WIDGETS);
export const setLoading = createAction(SET_LOADING);
export const setError = createAction(SET_ERROR);
export const setTab = createAction(SET_TAB);
export const setPage = createAction(SET_PAGE);
export const setPages = createAction(SET_PAGES);
export const setPageSize = createAction(SET_PAGE_SIZE);
export const setTotal = createAction(SET_TOTAL);
export const setSearch = createAction(SET_SEARCH);

export default {
  setWidgets,
  setLoading,
  setError,
  setTab,
  setPage,
  setPages,
  setPageSize,

import { createAction } from 'redux-tools';

// Actions
export const SET_WIDGETS = 'SET_WIDGETS';
export const SET_LOADING = 'SET_LOADING';
export const SET_ERROR = 'SET_ERROR';
export const SET_TAB = 'SET_TAB';
export const SET_PAGE = 'SET_PAGE';
export const SET_PAGES = 'SET_PAGES';
export const SET_PAGE_SIZE = 'SET_PAGE_SIZE';
export const SET_TOTAL = 'SET_TOTAL';
export const SET_SEARCH = 'SET_SEARCH';

export const setWidgets = createAction(SET_WIDGETS);
export const setLoading = createAction(SET_LOADING);
export const setError = createAction(SET_ERROR);
export const setTab = createAction(SET_TAB);
export const setPage = createAction(SET_PAGE);
export const setPages = createAction(SET_PAGES);
export const setPageSize = createAction(SET_PAGE_SIZE);
export const setTotal = createAction(SET_TOTAL);
export const setSearch = createAction(SET_SEARCH);

export default {
  setWidgets,
  setLoading,
  setError,
  setTab,
  setPage,
  setPages,
  setPageSize,
  setTotal,

import sortBy from 'lodash/sortBy';
import { createAction, createThunkAction } from 'redux-tools';

// Services
import { fetchDatasets as fetchDatasetsService } from 'services/dataset';
import { fetchAllTags, fetchInferredTags } from 'services/graph';

// Utils
import { TAGS_BLACKLIST } from 'utils/tags';

// RESET
export const resetExplore = createAction('EXPLORE/resetExplore');

// DATASETS
export const setDatasets = createAction('EXPLORE/setDatasetsList');
export const setDatasetsLoading = createAction('EXPLORE/setDatasetsLoading');
export const setDatasetsError = createAction('EXPLORE/setDatasetsError');
export const setDatasetsPage = createAction('EXPLORE/setDatasetsPage');
export const setDatasetsTotal = createAction('EXPLORE/setDatasetsTotal');
export const setDatasetsLimit = createAction('EXPLORE/setDatasetsLimit');
export const setDatasetsMode = createAction('EXPLORE/setDatasetsMode');

export const fetchDatasets = createThunkAction('EXPLORE/fetchDatasets', () => (dispatch, getState) => {
  const { explore, common } = getState();

  const concepts = Object.keys(explore.filters.selected)
    .map(s => explore.filters.selected[s])
    .filter(selected => selected.length);

  const params = {
    language: common.locale,

import { createAction, createThunkAction } from 'redux-tools';
import WRISerializer from 'wri-json-api-serializer';

// services
import {
  fetchPartners,
  fetchPartner
} from 'services/partners';
// TO-DO: get rid of this at some point
import DatasetService from 'services/DatasetService';

// actions
export const setPartners = createAction('PARTNERS/SET-PARTNERS');
export const setPartner = createAction('PARTNERS/SET-PARTNER');
export const setDatasets = createAction('PARTNERS/SET-DATASETS-BY-PARTNET');
export const setLoading = createAction('PARTNERS/SET-LOADING');
export const setError = createAction('PARTNERS/SET-ERROR');
export const setFilters = createAction('PARTNERS/SET-FILTERS');

export const getPublishedPartners = createThunkAction('PARTNERS/GET-PUBLISHED-PARTNERS',
  () => (dispatch) => {
    const queryParams = { published: true };

    dispatch(setLoading({ key: 'published', value: true }));
    dispatch(setError({ key: 'published', value: null }));

    return fetchPartners(queryParams)
      .then((partners) => {
        dispatch(setPartners({ key: 'published', value: partners }));
        dispatch(setLoading({ key: 'published', value: false }));
      })

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

// Actions
export const setTopic = createAction('TOPIC_PREVIEW_GET_TOPIC');
export const setLoading = createAction('TOPIC_PREVIEW_LOADING');
export const setError = createAction('TOPIC_PREVIEW_ERROR');

// Async actions
export const fetchTopic = createThunkAction('TOPIC_PREVIEW_FETCH_DATA', (payload = {}) => (dispatch) => {
  dispatch(setLoading(true));
  dispatch(setError(null));

  return fetch(new Request(`${process.env.API_URL}/topics/${payload.id}`))
    .then(response => response.json())
    .then(({ data }) => {
      dispatch(setLoading(false));
      dispatch(setError(null));
      dispatch(setTopic({ id: data.id, ...data.attributes }));
    })
    .catch((err) => {
      dispatch(setLoading(false));

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

// service
import { fetchDashboards, fetchDashboard } from 'services/dashboard';

// Actions
export const setDashboards = createAction('DASHBOARDS__SET-DASHBOARDS');
export const setDashboard = createAction('DASHBOARDS__SET-DASHBOARD');
export const setLoading = createAction('DASHBOARDS__SET-LOADING');
export const setError = createAction('DASHBOARDS__SET-ERROR');

export const getHighlightedDashboards = createThunkAction('DASHBOARDS__GET-HIGHLIGHTED-DASHBOARDS',
  () => (dispatch) => {
    const params = {
      'is-highlighted': 'true',
      includes: 'user'
    };

    dispatch(setLoading({ key: 'isHighlighted', value: true }));
    dispatch(setError({ key: 'isHighlighted', value: null }));

    return fetchDashboards(params)
      .then((dashboards) => {
        dispatch(setDashboards({ key: 'isHighlighted', value: dashboards }));
        dispatch(setLoading({ key: 'isHighlighted', value: false }));

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

// Actions
export const setTopicThumbnailList = createAction('TOPIC_THUMBNAIL_LIST_GET');
export const setLoading = createAction('TOPIC_THUMBNAIL_LIST_LOADING');
export const setError = createAction('TOPIC_THUMBNAIL_LIST_ERROR');
export const setSelected = createAction('TOPIC_THUMBNAIL_LIST_SELECTED');

// Async actions
export const fetchTopics = createThunkAction('TOPIC_THUMBNAIL_LIST_FETCH_DATA', (payload = {}) => (dispatch) => {
  dispatch(setLoading(true));
  dispatch(setError(null));

  const qParams = queryString.stringify({
    sort: 'name',
    ...payload.filters
  });

  return fetch(new Request(`${process.env.API_URL}/topic?${qParams}`))
    .then(response => response.json())
    .then(({ data }) => {