Multiple divs sharing same redux State

I am building a react widget builder, everything is completed but now I am stuck on this thing that I am running my react app on every div which has data attribute of data-widget=”custom” like this code {renderCustomWidget is just the function to render react app}

<body>
<div  data-widget="custom" data-id="appName_userToken_timeStamp1" ></div>
<div  data-widget="custom" data-id="appName_userToken_timeStamp2" ></div>
<div  data-widget="custom" data-id="appName_userToken_timeStamp3" ></div>
</body>

<script>
window.onload = function () {
            document.querySelectorAll('div[data-widget="custom"]').forEach(function (element) {
                renderCustomWidget(element)
            });
        }
</script>

the data-id attribute makes each div’s content unique

now I am building multiple widgets by just writing multiple widgets with the data-widget=’custom’ attribute. But the problem is that as I have only a single universal redux state for the entire application all the divs are showing the same content.

I want a way so that all the divs make their own block of redux state and manage that by only their own app reducers and actions

Answer

There is no problem in redux to have multiple state slices, in fast its what is recommended. Have a look at the docs.

Advertisement

Answer