useReducerWithManagedEffects.ts

type Dispatch<Action> = (action: Action) => void;

export function useReducerWithManagedEffects<State, Action, Effect>(
	reducer: (state: State, action: Action) => [ State, Effect ],
	runEffect: (effect: Effect, dispatch: Dispatch<Action>) => void,
	initialState: State
): [ State, Dispatch<Action> ] {
	const [ state, setState ] = useState(initialState);

	const dispatch: Dispatch<Action> = useCallback(
		(action: Action) => {
			setState(state => {
				const [ newState, effect ] = reducer(state, action);

				runEffect(effect, dispatch);

				return newState;
			});
		},
		[ reducer, runEffect ]
	);

	return [ state, dispatch ];
}