CODEWITHSUNDEEP
reactjsreduxstatestore
gpsugy
gpsugy

Reputation: 1279

Possible to Interchange State Structures for Redux Store?

What I Am Trying to Accomplish

My React app is quite large, and contains full-page components that the user flips through as they proceed through the app (think of a full-screen slideshow where each slide is interactive and contains different components but with the same "feel" as each other).

I know that Redux strictly emphasizes a single store for a single React app, however, but having a huge store like so still seems overkill and just plain badly-implemented:

obj {
    slide1: { // a lot of state },
    slide2: { // a lot of state },
    slide3: { // a lot of state },
    // more slide states
}

IDEALLY, since each slide is not at all dependent on one another, when one slide component mounts, that component alone will utilize/create the Redux store as it sees fit, but when the user moves to the next slide, the store is wiped empty, giving a fresh piece of state for the new slide component to use. I would imagine that on ANY slide X, the store would simply look like this:

state {
    slideX: { // a lot of state }
    // no other slides
}

Is this implementation possible/preferable, and if so, how?

My Concern

I think the biggest concern here is that if the user is on slide3, for instance, and clicks on something on that slide which will then dispatch an action, that it will unnecessarily trigger ALL the reducers for ALL the slides in the state that would definitely not be needed. This seems like it would affect performance quite negatively, and also seems like a bad structure for state in general. Perhaps my concern for performance with this kind of Redux store structure unwarranted?

Upvotes: 0

Views: 49

Answers (1)

Jake Haller-Roby
Jake Haller-Roby

Reputation: 6427

I think you misunderstand the purpose of Redux.

Components already have individually scoped state. Redux is not meant to re-invent that wheel. The use case you are describing is perfectly handled by the component state.

Redux is meant to hold information that is relevant across the entirety of your application, or at the very least 2+ disparate sections.

You shouldn't try to overutilize redux. It has it's very valuable purposes, but don't use a hammer when you need a screwdriver.

Upvotes: 2

Related Questions