What to use for global memory in Laravel Mix + React?

Question

React

Hi all.
I am making part of the program in Laravel. I use the react preset in the Laravel framework.

Those who are familiar know that there is such an entry point in the Laravel Mix preset

require('./bootstrap');
require('./components/FirstComponent');
require('./components/SecondComponent');

Well, then a render is displayed in each component

import React from 'react';
import ReactDOM from 'react-dom';
function FirstComponent(){
return(<div></div>)
export default FirstComponent;

if (document.getElementById('FirstComponent')) {
    ReactDOM.render(
    <FirstComponent/>, document.getElementById("FirstComponent"));
}

Because of this, I work according to this principle.

In certain places in the blade, I simply integrate all the components in turn.
This is convenient for me, and due to some nuances, I can’t make one parent component and insert others into it already.
I have each component separately.

The problem appeared when I needed global memory.
When I tried react-redux, I created a separate class for memory.
It turned out like this.

import { createStore } from 'redux';
import allReducers from '../reducers';
export const store = createStore(allReducers);

Well, then I changed a little component

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

import { Provider } from 'react-redux';
import { store } from '../classes/ReduxStore';

function FirstComponent(){
return(<div></div>)
export default FirstComponent;

if (document.getElementById('FirstComponent')) {
    ReactDOM.render(
<Provider store={store}>
    <FirstComponent/>
</Provider>, document.getElementById("FirstComponent"));
}

The problem is that the memory is unfortunately not global. If I display several different components on different pages in the blade, then the store is used only from the component that is currently on the page.
Please, is there any solution to this problem? Again, I can't make a hierarchy.

Answer 1

I haven’t worked with Laravel, and I’ve never come across such a partition, but if you need global data storage, why not look towards the context? You get the ability to use the context in different components with the same data set. It is enough to declare it at the top level. https://ru.reactjs.org/docs/hooks-reference.html#u
... Perhaps I did not fully understand your task, so I do not pretend to be the truth =)