Skip to content

Instantly share code, notes, and snippets.

@lopezjurip
Created Dec 30, 2020
Embed
What would you like to do?
React useReducer useContext with Typescript types
import React, { useReducer, useContext, Dispatch } from "react";
import "./styles.css";
// Local types, example: box, product, venue, etc
type MyItem = {
id: number;
name: string;
};
// Reducer types
type ActionMap<M extends { [index: string]: any }> = {
[Key in keyof M]: M[Key] extends undefined
? { type: Key }
: { type: Key; payload: M[Key] };
};
export enum Action {
AddItem = "ADD_ITEM"
}
type ActionPayloads = {
[Action.AddItem]: { name: string };
};
export type StoreActions = ActionMap<ActionPayloads>[keyof ActionMap<
ActionPayloads
>];
type StoreState = {
items: MyItem[];
};
// App global state AKA "store"
const initialState: StoreState = { items: [{ id: 0, name: "Initial" }] };
const WidgetContext = React.createContext<[StoreState, Dispatch<StoreActions>]>(
[initialState, () => null]
);
function reducer(state: StoreState, action: StoreActions): StoreState {
switch (action.type) {
case Action.AddItem: {
const last = state.items[state.items.length - 1];
const newItem = { id: last.id + 1, name: action.payload.name };
return {
items: [...state.items, newItem]
};
}
default: {
throw new Error("Action not recognized");
}
}
}
export default function App() {
// Create global state
const [store, dispatch] = useReducer(reducer, initialState);
return (
<WidgetContext.Provider value={[store, dispatch]}>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Component1 />
<Component2 />
</div>
</WidgetContext.Provider>
);
}
function Component1() {
// Subscribe to store
const [store, dispatch] = useContext(WidgetContext);
function handleClick() {
const name = String(new Date().getTime());
dispatch({ type: Action.AddItem, payload: { name } });
}
return <button onClick={handleClick}>Add item</button>;
}
function Component2() {
// Subscribe to store
const [store, dispatch] = useContext(WidgetContext);
return (
<ul>
{store.items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment