chan.dev/ lessons/ epicreact

State Reducer

Highlight title

The state reducer pattern is the most powerful React pattern I know.

Master this pattern and you’ll save yourself a lot of pain.

Like all React-specific patterns, state reducers implement a general programming principle.

Tab over to inversion of control doc.

Here, the principle is inversion of control.

Highlight text.

In procedural programming, a program’s custom code calls reusable libraries to take care of generic tasks, but with inversion of control, it is the framework that calls the custom code.

Back to epicreact. Highlight resources.

I strongly recommend following the provided resources and incorporating this pattern into your programming toolbox.

Implement inversion of control via the state reducer pattern

Open sidebar to reveal included lessons. Click on first lesson.

In this lesson we’ll implement the state reducer pattern into the useToggle hook.

Click the Set to playground button.

Let’s load the first exercise into the playground and poke around.

Jump over to the solution to see the experience we’re after.

Now let’s jump to code.

In the toggle module, we find instructions for recieving a state reducer function as an option.

And in the app module, we find instructions for providing a state reducer that resolves the user experience challenge.

Run through the State Reducer and Default State Reducer exercises. I’ll see you in the next video with my solution.