Connecting Redux Stores using Redux Toolkit

Question

for various reasons, my workplace is currently trying to introduce React/Redux into our project. Our project utilizes Shopify and it's Liquid templates along with jQuery. They want to migrate towards React, and we have thus far been injecting React by looking for specific ID's and injecting React Components in that way.

Due to this, and because we are now needing a store to keep and render data, I've come to a strange issue. If I wrap each one of these injected components with a Provider and store, I can essentially have each component with it's own store, but that doesn't help at all as it's pretty much mimicking local state.

Is there a way for me to 'connect' and share the store with multiple components?

I thought about wrapping the whole project, as is usually the case, but doing so would/should render the Liquid useless.

Here's an example of what's going on:

import ReactDOM from "react-dom";
import React from "react";

import attrToProps from "../../../partials/data-attribute-to-props.js";
import FavoritesToggler from "./index.js";
import store from "./../../Store/store"
import { Provider } from "react-redux"

const rootEl = document.getElementById("fav-container-react");

if(rootEl) {
    const props = attrToProps(rootEl.attributes);
    rootEl && ReactDOM.render(<Provider store={store}><FavoritesToggler {...props} /></Provider>, rootEl);
}

This is injected into a div that contains the 'fav-container-react' id.

But we have several of these at the moment, and I'm wondering how to get them to connect all to the same store.

Any ideas would be appreciated, including perhaps a possible change in architecture (we're required to 'show progress' in order to continue getting funded, so starting a new project isn't an option. Meaning I need a solution that is able to continuously update legacy code to React)

Answer 1

You don't need a provider if the component has a store prop and you use connect . The hooks won't work so I'd advise using a containers that can be refactored using the hooks when all of the project is converted to React.

 const { connect } = ReactRedux; const { createStore, applyMiddleware, compose } = Redux; const initialState = { counter: 0 }; //action types const UP = 'UP'; //action creators const up = () => ({ type: UP, }); const reducer = (state, { type }) => { if (type === UP) { return { ...state, counter: state.counter + 1 }; } return state; }; //selectors const selectCounter = (state) => state.counter; //creating store with redux dev tools const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( reducer, initialState, composeEnhancers( applyMiddleware( () => (next) => (action) => next(action) ) ) ); const App = ({ count, up }) => { return <button onClick={up}>{count}</button>; }; const AppContainer = connect( (state) => ({ count: selectCounter(state), }), { up } )(App); const OtherContainer = connect( (state) => ({ count: selectCounter(state), }) )(({count})=><h1>{count}</h1>); ReactDOM.render( <AppContainer store={store} />, document.getElementById('root-1') ); ReactDOM.render( <AppContainer store={store} />, document.getElementById('root-2') ); ReactDOM.render( <OtherContainer store={store} />, document.getElementById('root-3') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script> <div id="root-1"></div> <div id="root-2"></div> <div id="root-3"></div>