Under development! react state handling helper based on useReducer and typescript maybe the final name will be something else
This minimal library will help to organize mid complex state handling under with type guarded dispatch capable actions.
pnpm add typerdux
Declare the set of actions with their types
// actions.ts
export enum actions {
START_APPLICATION = "START_APPLICATION",
PLACE_CONTENT = "PLACE_CONTENT",
ADD_ITEM = "ADD_ITEM",
}
export type ActionTypes =
| { type: actions.START_APPLICATION, payload: {start: number, id: string } }
| { type: actions.PLACE_CONENT, payload: number[] }
| { type: actions.ADD_ITEM, payload: number };
Example of use in saga
// exampleGenerator.ts
import { typedPutActionMapFactory } from 'typerdux';
import { actions, ActionTypes } from './actions;
const run = typedPutActionMapFactory<typeof actions, AppActions>(actions);
export function * exampleGenerator() {
yield run.START_APPLICATION({
start: Date.now(),
id: Math.random().toString(32).slice(-8)
});
yield run.PLACE_CONENT([87, 45, 23, 12]);
yield run.ADD_ITEM(42);
}
export const FunFunction: FC = () => {
const [state, put] = useSagaFactory(gameReducer, initialTable, game, gameSaga);
useEffect(() => {
actions.LETS_PLAY(true);
}, [actions]);
return (
<main className="bg-black text-green-400 min-h-screen grid place-items-center relative">
<pre>{JSON.stringify(state, null, 2)}</pre>
</main>
);
}
... short description about implementation
... I can show typerdux
capability by with a simple game
creating-a-typescript-library-with-vite
https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e
npm pack --pack-destination ~