-
-
Notifications
You must be signed in to change notification settings - Fork 15.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using Redux in reusable React component #1098
Comments
Refs #1065 (comment) |
The most practical suggestion I can give is to separate presentational and container components. Presentational components can be reused anywhere in the app, and you can generate container components from them using Another approach you can take is something like https://github.com/erikras/multireducer although I don't quite like the reading complexity it seems to introduce. I'd rather pass IDs manually in the code. Elm architecture has a nice answer to truly reusable view+update function pairs, but its downside is that you can't nest stateful components without writing plumbing code between them. Check out https://github.com/gaearon/react-elmish-example, https://github.com/ryantrinkle/reflex, https://github.com/evancz/elm-architecture-tutorial/, https://github.com/acdlite/realm if you're interested. |
@gaearon Your suggestion suggests to reuse React views only. What do you think about reusing the whole composition of react view + redux reducers, actions, action creators + a store slice? For example, in a component with a complex business logic that should be in the reducers. |
That's what I'm talking about in the second and third paragraphs of my previous comment. |
@gaearon Thanks! In multireducer, one has to know all the components and their identifiers at the time of combining the reducers. That's not usable if I want to dynamically create instances of these complex reusable components. Similar approach is used in redux-form, with the improvement that one should specify the identifier in the view decorator, but the implementation has its downsides, too (the component logic like validation is only customizable during reducer composition, not during definition of a component via the decorator). The elmish example and realm look the most close to what I expect from reusability, but the examples are so small and simple, so this approach and the library can't be validated for production use (Redux is more mature on that). |
Haven't done much with Realm (didn't event really mean for other people to see it yet) other than the thing I built it for, which is just one part of one app that I'm currently working on. Works really well there as a "mini-Redux" app inside a larger Redux app. If/when I ever give it some more attention, the two things that may set it apart from similar libraries like Reflex is 1) you don't have to build your entire app out of Realm components (unless you want to) and 2) integration with the Redux ecosystem via Realm Redux. One thing I've observed on my team is people get super excited about Redux and they start throwing everything—including component state—into what are effectively "global" reducers, which does not scale well at all beyond simple todo apps and becomes a huge pain in the ass to refactor later. I've been guilty of this as well. Even if Realm ends up not being the answer, I am interested in this area... Redux is fantastic for application level state, and if you're not into Relay (Relay is awesome), it's pretty good at data fetching, at least relative to other Flux-ish solutions out there. However, it's not great at (nor do I think it was ever intended for) modeling component-level state. |
@acdlite IMO, your team has got valuable experience for the future of frontend and Redux. I've been thinking about this global/local state compromise for a while. What I've come up with is that sharing global state is important for:
Everything else looks like a local state, but to have all the benefits listed above for the local state, too, I cannot put it into React element state. Have you experienced these use cases? What have you come up with Realm or Redux or a combination of them? Have you got any examples of Redux+Realm combination? @gaearon Sorry for hijacking your repo for this discussion, probably we should move to reactiflux discord or somewhere else. |
In our applications we solved this problem in connect-like style. https://github.com/Babo-Ltd/redux-state |
I'm new to redux but how about an idea:
So the API of the Hope I was clear enough and didn't miss any aspect of working with redux, again, I'm new to this (basically started learning it a few days ago) |
hi,
i am working on a standalone react component, of which i would like to use multiple instances in my application. the application itself uses redux, so i thought why not also use it for the component.
the component is a filterable list of entries in a json file.
the
<Library>
component receives props from its parent and is also connected to the store. — so far so good.but then i realized what having a single store means: all instances of the component would share a store.
ok, you might give each instance an id and use that in the actions / reducer to tell things apart, but that sounds like a lot of extra work. also, i don't want to make an id attribute mandatory for using the component.
isn't there a simpler way for each instance to have it's own, separate state?
The text was updated successfully, but these errors were encountered: