Redux Branch

Table of Contents

• Introduction
• branch(storeFactory, [localActions])

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])

import React from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
import { branch } from 'redux-branch';
 
import counterReducer from './counterReducer';
 
const provide = branch(
  // Specify a factory for creating our local store.
  () => createStore(counterReducer),
 
  // By default, all actions pass through to the parent store (assuming a parent
  // store exists.) To handle actions within our local store, we must specify
  // the action types that we want to capture.
  ['INCREMENT', 'DECREMENT']
);
 
export default provide(connect(mapStateToProps)(MyComponent));