React Context keeps growing. Redux is on the table.

Context passes values down. It doesn't manage them.

<CartProvider><UserProvider>

Today · providers

export function App() {
  return (
    <CartProvider>
      <UserProvider>
        <FiltersProvider>
          <main>App</main>
        </FiltersProvider>
      </UserProvider>
    </CartProvider>
  )
}

With a store · no provider

export const $cart = atom<Product[]>([])
export const addItem = (item: Product) => $cart.set([...$cart.get(), item])
export function CartCount() {
  const cart = useStore($cart)
  return <span>{cart.length}</span>
}

Theme, localeKeep Context

Time travel, strict patternsRedux Toolkit

Shared state, less wiringA small store

Rarely-changing values? Context is still the right tool.

npm install nanostores

Getting started →

No app logic in React hooks →Two islands need the same data →