We have built React app for a game of MadLibs where state is managed with the useRiducer hook.

You can view and edit it directly on CodeSandbox, or play around with it below.

• CodeSandbox playground

Commentary

Improving by using bundle

There is an onClick which does the following:

(e) => {
	// ...

	// update the relevant state value
	dispatch(actions.data.create.set(label, e.target.value));

	// hide the work-in-progress story
	dispatch(actions.shouldShowStory.create.off());
}

This triggers two separate dispatches, which could lead to unnecessary re-rendering.

To ensure that these are processed and batched together, you can (and should) use bundle :

import { bundle } from 'riduce'

(e) => {
	// ...

	// `bundle` effectively merges two actions into a single compound action
	// letting you prevent unnecessary re-renders!
	dispatch(bundle([
		actions.data.create.set(label, e.target.value),
		actions.shouldShowStory.create.off()
	]));
}