Here’s A Simpler Alternative to Redux

Using a container metaphor to provide a minimal and modular microservice-esque solution to managing state.

Image credit: Author

Introduction

The container pattern is a concept introduced in the Unstated-Next library. This pattern thinks about states as varieties of Containers that hold a modular slice of the global application state. To provide this state you create a Context across your application, then access it through hooks.

Compared to something like Redux, this Container pattern offers a Hook-centric way to manage state. It’s easier to learn, scales with your application well , and provides an intuitive way to think about global state. Here’s how it works.

What’s the Container Pattern?

The container pattern is a methodology in which instead of having all your global state in one external library or global store, such as Redux, you divide that state into multiple chunks called containers. These chunks are responsible for managing their own state and can be pulled into any functional component in the app, using something similar to the following syntax:

const {user} = Auth.useContainer();

This pattern works really well because it divides state into self-managing chunks rather than having everything intertwined. Each component can simple pull in the chunk of state that it wants to use and is only dependent on a part of your applications state.

Each chunk of state is easy to reason about. They’re simply a custom hooks wired up to context providers — that’s it. The term “Container” really just means “a React Custom Hook and a Context Provider.” So when someone is recommending state management with Hooks and useContext, they’re technically recommending this container pattern.

To use containers you just have to import the Context and use the hook. You don’t technically need any external libraries, however I use a library called Unstated-Next because it gives me some benefits that make this pattern even easier.

What is Unstated-Next?

Unstated-Next is a tiny library that helps us reason about these global containers a…