Redux Branch
Table of Contents
Introduction
One of the biggest sources of confusion when learning to use Redux is knowing when to use the component's local state versus the global Redux state. Although there are many advantages to using a single store, there are also some disadvantages:
- Dynamically structured state is impossible.
- Global variables are bad.
- Performance suffers as your graph gets larger.
We can get around these limitations by using "branches". A branch is just a fork whose local state is merged on top of its parent. This allows each component to have its own Redux store while still being able to interact with the parent store. (Note: It's important that the structure of the global Redux state is an object.)
By default, dispatched actions are passed through to the parent store. To handle an action in the local store, specify the action type in the localActions
parameter when calling branch()
.
branch(storeFactory, [localActions])
;;;; ; const provide = ; MyComponent;