React-Redux - add second store to your app

#react #redux #beginners #javascript

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