Redux-like useReducer pattern

exampleState.ts

import { Dispatch, useReducer, useEffect } from "react";
import { produce } from "immer";

//=======
// State
//=======
export type ExampleState = {
    name: string;
    level: number;
    saved: false;
};

const initialState: ExampleState = {
    name: "Squirtle",
    level: 5,
    saved: false,
};

//=========
// Actions
//=========
type ExampleSyncAction =
    | { type: "levelUp" }
    | { type: "evolve" }
    | { type: "tradeSuccess" };
type ExampleAsyncAction = { type: "trade" } | { type: "save" };
declare const doTrade: () => Promise<void>;

export type ExampleAction = ExampleSyncAction | ExampleAsyncAction;

function assertNever(_action: never, msg: string): never {
    throw new Error(msg);
}
//=========
// Reducer
//=========
const exampleReducer = produce(
    (state: ExampleState, action: ExampleSyncAction) => {
        if (action.type === "levelUp") {
            state.level += 1;
        } else if (action.type === "evolve") {
            state.name = state.name === "Squirtle" ? "Wartortle" : "Blastoise";
            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
        } else if (action.type === "tradeSuccess") {
            state.name = "Charmander";
        } else {
            assertNever(action, `Unhandled action ${(action as any).type}`);
        }
    },
);

//===========
// Selectors
//===========

export function isFullyEvolved(state: ExampleState) {
    return state.name === "Blastoise";
}

//======
// Hook
//======
export type ExampleDispatcher = Dispatch<ExampleAction>;
export function useExampleState(): [ExampleState, ExampleDispatcher] {
    const [state, syncDispatch] = useReducer(exampleReducer, initialState);

    /* Wrapper around syncDispatch, which performs async actions */
    const dispatch = (action: ExampleAction) => {
        if (action.type === "trade") {
            doTrade().then(() => {
                syncDispatch({ type: "tradeSuccess" });
            });
        } else if (action.type === "save") {
            // ...
        } else {
            syncDispatch(action);
        }
    };

    useEffect(() => {
        // "Reaction" to initial load
    }, []);

    const { level, name } = state;
    useEffect(() => {
        // "Reaction" to level change
        dispatch({ type: "save" });
    }, [level, name]);

    return [state, dispatch];
}