@aics/redux-utils

Utilities for working with Redux. There are others out there--this is ours.

Usage no npm install needed!

<script type="module">
  import aicsReduxUtils from 'https://cdn.skypack.dev/@aics/redux-utils';
</script>

README

@aics/redux-utils

This package extracts state management and testing utilities from cookiecutter-react-redux and elsewhere.

All functions, classes, and interfaces are exported from the top level of this package. There is no default export. For example:

import { configureMockStore, ResponseStub, makeReducer } from "@aics/redux-utils";

Examples:

  1. Test that a redux-logic logic responds to an action, makes an HTTP request, and dispatches another action with the result of that HTTP request. Provide a mock value for the response of the HTTP request.
import { configureMockStore } from "@aics/redux-utils";
import { expect } from "chai";

describe("configureMockStore", () => {
    interface State {
        foo: string;
        bar: number;
    }

    const initialState = {
        foo: "hello",
        bar: 123,
    };

    const simpleReducer: Reducer = (state = initialState, action) => {
        if (action.payload) {
            return {
                ...state,
                ...action.payload,
            };
        }

        return state;
    };

    const logic = createLogic({
        type: "TEST1",
        process: async (deps, dispatch, done) {
            const response = await deps.httpClient.get("/api/1.0/foo/bar");
            dispatch({ type: "TEST3", payload: response.data });
            done();
        },
    });

    const responseStub = {
        when: "/api/1.0/foo/bar",
        respondWith: { data: "Hello from the endpoint" },
    };

    // DON'T MISS THE ASYNC!
    it("creates a mock Redux store with some helpful defaults and utilies", async () => {
        const { store, actions, logicMiddleware } = configureMockStore<State>({
            state: initialState,
            reducer: simpleReducer,
            responseStubs: [responseStub]
            logics: [logic],
        });

        store.dispatch({ type: "TEST1" });

        // AFTER THIS POINT, ALL LOGICS HAVE FINISHED RUNNING
        await logicMiddleware.whenComplete();

        expect(actions.includes({ type: "TEST1" })).to.be.true;

        // dispatched by logic
        expect(actions.includes({ type: "TEST3", payload: "Hello from the endpoint" })).to.be.true;
    });
});

Exports

actions

  • Functions:

    • [[batchActions]]
    • [[enableBatching]]
  • Interfaces:

    • [[BatchedAction]]

ActionTracker

  • Classes:

    • [[ActionTracker]]
  • Interfaces:

    • [[Actions]]

constants

  • Functions:
    • [[makeConstant]]

mock-http-client

  • Functions

    • [[createMockHttpClient]]
  • Interfaces

    • [[ResponseStub]]

mock-store

  • Functions

    • [[configureMockStore]]
  • Interfaces

    • [[ConfigureMockStoreConfig]]

reducers

  • Functions

    • [[makeReducer]]
  • Interfaces

    • [[ActionHandler]]
    • [[ActionTypeToHandlerMap]]

state

  • Functions
    • [[mergeState]]

store

  • Functions

    • [[configureStore]]
  • Constants

    • [[defaultReduxLogicDeps]]
  • Interfaces:

    • [[ConfigureStoreConfig]]
    • [[ReduxLogicDependencies]]