Flux Inspired Seperate Slices With Lens

[dospore]

Just wanted to share the setup that I landed on combining the Flux Inspired example and seperate slices. Only because I couldn't find many other examples online. It leverages a cool package I found https://github.com/dhmk083/dhmk-zustand-lens. One of the good thing is under the hood it still uses immer and if you want you can still create global slices. It pretty much just makes it easier to set and get within the slice, not a mega difference but helps if you have some deeper nested states.

The end result I came to was something like.

Wondering if anyone else has some alternative solutions.

// Seperated return type to allow for a different
//  eg a slice with no lens would be StateSlice<StoreState, INoLensSlice>
//  since it receives a StoreState get and set but does not have to return the entire store state
export type StateSlice<T extends object, R extends object> = (set: SetState<T>, get: GetState<T>) => R;

interface IFishSlice {
    fishes: number;
    increment: () => void;
}
export const fishSlice: StateSlice<IFishSlice, IFishSlice> = (set, get) => ({
    fishes: 0,
    increment: () => {
        set({ fishes: get().fishes++ });
    },
});

interface IBearSlice {
    bears: number;
    decrement: () => void;
}
export const bearSlice: StateSlice<IBearSlice, IBearSlice> = (set, get) => ({
    bears: 0,
    decrement: () => {
        set({ bears: get().bears-- }); 
    },
});

// Turn the set method into an immer proxy
const immer =
    <
        T extends StoreState,
        CustomSetState extends SetState<T> = SetState<T>,
        CustomGetState extends GetState<T> = GetState<T>,
        CustomStoreApi extends StoreApi<T> = StoreApi<T>,
    >(
        config: StateCreator<
            T,
            (partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void,
            CustomGetState,
            CustomStoreApi
        >,
    ): StateCreator<T, CustomSetState, CustomGetState, CustomStoreApi> =>
    (set, get, api) =>
        config(
            (partial, replace) => {
                const nextState =
                    typeof partial === 'function' ? produce(partial as (state: Draft<T>) => T) : (partial as T);
                return set(nextState, replace);
            },
            get,
            api,
        );

// can lens each entry or leave as blank
export const useStore = create<StoreState>(
    immer(
        withLenses(() => ({
            bearSlice: lens<IBearSlice>(createBearSlice),
            fishSlice: lens<IFishSlice>(createFishSlice),
            // can add global dispatches here
        })),
    ),
);