Remox (Redux in MobX)

example.ts

import { autorun } from "mobx";

import { createStore, Action, Reducer } from "./remox"

interface Person { firstName: string; lastName: string; }

interface SetFirstName { type: "SET_FIRST_NAME", newFirstName: string; }
interface SetLastName { type: "SET_LAST_NAME", newLastName: string; }

function personReducer(state:Person, action: SetFirstName | SetLastName) {

    switch (action.type) {
        case "SET_FIRST_NAME":
            return { ...state, firstName: action.newFirstName };

        case "SET_LAST_NAME":
            return { ...state, lastName: action.newLastName };
    }

    return state;
}

const person = createStore({ firstName: "", lastName: "" }, personReducer);

const quit = autorun(() => console.log(person.getState()));

person.dispatch({ type: "SET_FIRST_NAME", newFirstName: "Homer" });
person.dispatch({ type: "SET_LAST_NAME", newLastName: "Simpson" });

quit();

remox.ts

import { observable, runInAction } from "mobx";

// An action has a string property called type
export interface Action<Type extends string> { readonly type: Type; }

// Reducer evolves state as instructed by an action
export type Reducer<State, Action> = (state: State, action: Action) => State;

export interface Store<State, Action> {
    getState(): State;
    dispatch(action: Action): void;
}

// Stores a State value and uses reducer that accepts Action (typically a union of Action<T> variants)
export function createStore<State, Action>(init: State, reducer: Reducer<State, Action>) {

    const state = observable.shallowBox<State>(init);

    return {
        getState(): State {
            return state.get();
        },

        dispatch(action: Action) {
            runInAction(() => state.set(reducer(state.get(), action)));
        }
    }
}