@aics/redux-utils NPM

@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:

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