Set up types if you’re using TypeScript
types.ts
Set up your reducer
Immer does export a useImmerReducer hook, I don’t use that. If I decide to rip out immer, I’ll just need to re-implement my reducer function and not shuffle type definitions or alter my context definition.
Set up your context
This is very much a boilerplate to get you started. Very important, if you’ve got a large application and need global stores, look at other solutions like Zustand or Jotai, they do a much better job at reducing unnecessary re-renders. This pattern should wrap small parts of a application, such as a form experience or in a Micro Context pattern. You can customise the
ContextState
type to include computed
values which you’ll compute using a useMemo
or inline in the Provider
. You can also add additional props to the Provider
to determine the initial state, remember to store these values for later use in the RESET
action.
Also also, rename these functions/types/files to be more specific to your use case. I’ve used State
and Actions
as generic names, but you should be more specific to your use case.