Posted on Mar 30, 2020

Mapped Reducer Actions in TS

You should have a working knowledge of react, reducers, and typescript to get the most out of this post. I wrote this before finding out about mapDispatchToProps. I still decided to post anyway in case someone not using Redux wanted to implement it themselves in TS.

The idea is to automatically bind a dispatch to a group of action creators.

So instead of manually dispatching:

import {createAddItemAction} from 'items/actions.ts' const {dispatch} = useDispatch() dispatch(createAddItemAction({position: 5}))

It'd be nicer to provide a method that already has dispatch in its scope:

const {addItem} = useEditor() addItem({position: 5})

I'll be referring to such a method as a ~~mapped~~ built action.

You might also see them referred to as bound action creators, or mapped dispatch to props. Personally I prefer built actions, it implies they're all good to go.

Sounds simple enough, right? Something like this will do:

const addItem = dispatch => position => dispatch(createAddItemAction({position})

But What if we had multiple action creators, and we were passing these into a context value? A ton of repetition.

The rest of the examples will be in Typescript; if you can think of a better way to type the functions - let me know!

Binding multiple action creators

Starting with a standard action creator

item/actions.ts

export const REMOVE_ITEM = 'REMOVE_ITEM' export interface RemoveItemAction { type: typeof REMOVE_ITEM category: Category position: number } const remove = (args: {in: Category; at: number}): RemoveItemAction => ({ type: REMOVE_ITEM, category: args.in, position: args.at, })

We'll also export a build function together with the actions that calls a withDispatch function

item/actions.ts

 //... insert, and addNew action creators are also defined here const remove = (args: {in: Category; at: number}): RemoveItemAction => ({ //... }) export const build = withDispatch({remove, insert, addNew})

withDispatch does most of the heavily lifting. Its job is to take an object of action creators, and return an object of built actions.

reducer.ts

// takes a bunch of actions ({remove, insert, addNew}) export function withDispatch<T extends ActionCreators>(actions: T) { return (dispatch: React.Dispatch<Action>): T => { const wrapped = {} as any return Object.entries(actions).reduce((acc, [key, createAction]) => { acc[key] = (...args: any[]) => dispatch(createAction(...args)) return acc }, wrapped) } }

And we'll define our action types too

reducer.ts

export type Action = CategoryAction | ItemAction | MenuAction export interface ActionCreators { [prop: string]: (...args: any[]) => Action

Where the binding happens

We'll bind the dispatch where we use the reducer. I'm using it in a context provider here.

editor/state/index.ts

import {reducer, initialState} from 'menu/editor/state/reducer' import {build as buildItemActions} from './item/actions' type EditorContextValue = typeof initialState & { item: ReturnType<typeof buildItemActions> } const EditorContext = createContext( (undefined as unknown) as EditorContextValue, ) export function EditorProvider(props: {children: ReactNode}) { const [state, dispatch] = useReducer(reducer, initialState) return ( <EditorContext.Provider value={{ ...state, item: buildItemActions(dispatch) }} > {props.children} </EditorContext.Provider> ) }

Don't combine everything into a single context like this by the way, it will trigger unnecessary re-renders. See the solution on Github.

Sending the action

Finally, in our component we can just send the action

 import {useEditor} from './state' export default function MenuEditor(props: {restaurantId: number}) { const { item, categories } = useEditor() const category = category[0] item.remove({in: category, at: 2} // Calling our built action //... }