redux-thunk-monitor

redux-thunk-monitor provides an automatic, generic way to record redux-thunk loading/error disposition in your application state. Relevant consumers can read loading/error data directly from state rather than explicitly monitoring and passing this information around to descendants.

Installation

npm install --save redux-thunk-monitor

Install the reducer at the key 'thunks':

1import { thunkMonitorReducer } from "redux-thunk-monitor";
2import { combineReducers } from "redux";
3
4const reducer = combineReducers({
5  // your stuff,
6  thunks: thunkMonitorReducer
7});

Currently, the key is not configureable. The reducer must be installed at the top level thunks key.

Install the middleware:

1import { thunk } from "redux-thunk";
2import { thunkMonitor } from "redux-thunk-monitor";
3
4const store = createStore(rootReducer, applyMiddleware(thunk, thunkMonitor));

State persistence: It's highly unlikely that preserving loading status in an app's persisted state would be useful. Monitored thunks are presumably destroyed when the application is terminated. Take care to exclude the thunks key from any state persistence/rehydration mechanisms you have in place.

Usage

Monitoring a given thunk simply requires assigning an id. You can do this in your action creators:

1import { monitorThunk } from "redux-thunk-monitor";
2
3export function getProfile() {
4  async function getProfileAsync(dispatch, getState) {
5    const userProfile = await apiClient.get_profile();
6    // ...
7  }
8
9  monitorThunk(getProfileAsync, "userLoading");
10
11  return getProfileAsync;
12}

If you want to monitor the loading state for a series of unique objects and don't want loading one to trigger a loading state for the others, be sure to make your monitor id unique to each object:

1export function getTodo(id) {
2  async function getTodoAsync(dispatch, getState) {
3    const userProfile = await apiClient.get_todo(id);
4    // ...
5  }
6
7  monitorThunk(getTodoAsync, `todoLoading:${id}`);
8
9  return getTodoAsync;
10}

Note that any exceptions the thunk raises are preserved. Logic as follows will continue to work as though the thunk was unmonitored:

1try {
2  await dispatch(getProfile());
3} catch (e) {
4  dispatch(logOut());
5}
6
7dispatch(getProfile()).catch(() => dispatch(logOut()));

Once an action is monitored, components can check on the id's loading or error state using the library's state selectors:

1import React from "react";
2import { connect } from "react-redux";
3import {
4  getLoadingCount,
5  isLoaded,
6  isLoading,
7  getError,
8  hasError
9} from "redux-thunk-monitor";
10
11export function MyLoader(props) {
12  if (props.isLoaded) return <p>Loaded</p>;
13  if (props.isLoading) return <p>Loading {props.loadingCount}</p>;
14  if (props.hasError) return <p>Failure. {renderError(props.error)}</p>;
15}
16
17function stateToProps(state) {
18  return {
19    loadingCount: getLoadingCount(state, "UserLoading"),
20    isLoaded: isLoaded(state, "userLoading"),
21    isLoading: isLoading(state, "userLoading"),
22    hasError: hasError(state, "userLoading"),
23    error: getError(state, "userLoading")
24  };
25}
26
27export default connect(stateToProps)(MyLoader);

If any invocation of a specified monitor id is running anywhere in the app, isLoading(...) will return True. For example, if multiple parts of your app trigger simultaneous loading requests for the current user's profile, isLoading(state, "userLoading") will return True as long as any of those thunks is executing.

If this is not the desired behavior, ensure that each invocation is using a unique monitor id:

1isLoading(state, "todoItem:264e1ac1-2ed3-4c39-b184-3bb61525919c");

Error state is cleared automatically whenever any executing instance of a monitored thunk succeeds.

1await dispatch(getUserProfile()); // fails
2getError(state, "userProfile"); // { message: "....", ...error.data}
3hasError(state, "userProfile"); // true
4await dispatch(getUserProfile()); // succeeds
5hasError(state, "userProfile"); // false

Error data via state

When an exception is encountered, redux-thunk-monitor looks for a data attribute on the exception and records that value to the state. You can use this functionality to, for example, automatically record server-sider form validation errors in the application state.

1import { monitorThunk } from "redux-thunk-monitor";
2
3function ApiError(error) {
4  const apiError = Error("API Failure");
5  // apiError.data will be stored in the state when redux-thunk-monitor
6  // records the error
7  apiError.data = getApiErrorData(error);
8  return apiError;
9}
10
11function normalizeApiError(error) {
12  if (!isApiError(error)) throw error;
13  throw ApiError(error);
14}
15
16export function getProfile() {
17  async function getProfileAsync(dispatch, getState) {
18    const profile = await apiClient.get_profile().catch(normalizeApiError);
19  }
20
21  monitorThunk(getProfileAsync, "userLoading");
22
23  return getProfileAsync;
24}

This behavior is not currently configurable.