React-Redux - add second store to your app

You may encounter situation when you need second Redux Store in your app. Wait what? Isn't Redux a single store architecture...?

Yes it is, but maybe you have to extend existing application and you would rather not to interact with existing Redux Store.

Wit react-redux you can create new Store, which will be using separate context:

import React from 'react'
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook
} from 'react-redux'

const customContext = React.createContext(null)

export const useCustomStore = createStoreHook(MyContext)
export const useCustomDispatch = createDispatchHook(MyContext)
export const useCustomSelector = createSelectorHook(MyContext)

const customStore = createStore(rootReducer)

export function MyProvider({ children }) {
  return (
    <Provider context={customContext} store={customStore}>
      {children}
    </Provider>
  )
}

You can find docs about this solution here

Blog

React-Redux - add second store to your app

Tomasz Kudlinski

Join Our Newsletter. No Spam, Only the good stuff.

Related