-
-
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
Is it ok and possible to store a react component inside a reducer? #1248
Comments
Could you please explain why do you need to do so? |
Never do it, see official advice. |
@simongfxu 👍 |
Thank you for the clarification @simongfxu |
What you might want to do is give unique string IDs to some components and store those IDs in state. For example, you might store something like |
@gaearon yes, I took a similar path. I am storing the names (which need to be unique) instead of ids. Then I |
I know this issue is closed, but I wanted to chime-in because I have a similar use-case. I have a store called
So, in the
However, dev-tools reports the correct Anyhow, I just wanted to get my use-case out there.... Cheers! |
@oscar-g You should assign serializable (string or numeric) identifiers to your tools -- this is what you'll be passing via actions and storing in the store, not React components themselves.
Yes, this is the only way to go. |
Thanks, @sompylasar. I think that is basically what I ended up doing.
Where the keys in Is this what you mean? |
Yep, this is the way to go. |
@simongfxu your link "What Shouldn't Go in State?" URI is gone (redirects to new docs). Could you update link? :) |
@Bartuz , @simongfxu : not sure the new docs have an equivalent to that section, actually. Here's a link to the original page in the Web Archive: React Docs: Interactivity and Dynamic UIs. Also, here's the original content, quoted:
|
My 2 cents:
|
@Dindaleon I got your point and i find it interesting, in spite of what the official React Doc suggests. |
I have a similar problem. Not sure if opening an issue is a good idea. I basically have a plugin system where plugins can register and are allowed to add new components to the UI. I currently add them under a 'components' object within the store. They are added using an action creator and stored there using under the payload key. UI components that allow plugins to be added just check the store if anything has been added. If yes, they pull the component from there and render it. I've read a lot about adding functions (reducers)/react components to the store. But I couldn't find any good solution to this. I can't really map UI elements to an I'd since I have no way to know each element during compile time. And I somehow need a registration mechanism to make the new UI elements available to the core application. Did anybody had a similar situation? How did you solve them? I've looked into a lot of open source projects that rent to have a similar problem (atom for example). Those store their components within a |
@sirwindfield : you may want to look at this: http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/ . It appears to be an extension of the basic approach for handling UI component lookups at runtime, just extended to have a global-ish variable and registration function to add to that table rather than having it be hand-written. If you need that to be available across the app, you could also write your own |
@markerikson thanks for the reply! |
@sirwindfield : It's definitely a lesser-known topic, yeah. That said, I've cataloged several "Redux plugin/encapsulation"-type libraries at https://github.com/markerikson/redux-ecosystem-links/blob/master/component-state.md#modularity-and-encapsulation . I haven't yet had time to try any of them out myself. Someday I'd like to be able to experiment with them and get an idea of what they're capable of, but I just have too much else to do. Still, you might want to look through them and see if anything matches your use case. |
@markerikson thanks! This list is awesome. |
What if I want to store in state a File object, for upload tracking purpose. Should this be ok? |
Actually no, I can store only serializable objects. |
You could store the path of the file though |
@albanx potentially yes, you could encode the file (base64) and store it whenever you desire. The question is: do you really need to store a file? |
@sirwindfield I meant a HTML5 File, Blob (when user selects a file in the browser to upload). |
Interesting case, Alban. Keep us updated what's your solutions to this
[image: Mailtrack]
<https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&>
Sender
notified by
Mailtrack
<https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&>
08/01/18,
3:12:04 PM
2018-08-01 10:28 GMT+02:00 Alban <notifications@github.com>:
… @sirwindfield <https://github.com/SirWindfield> I meant a HTML5 File,
Blob (when user selects a file in the browser to upload).
@soulclown <https://github.com/soulclown> I really do not need the
content to the file, but just a reference to the File element. I am
creating an uploader and I want to keep track of the uploaded files and
progress in the state. I will end up creating an ID for the files and store
that in the state.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1248 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AEL3RHZQT-Kp-MLFoUZryI0hrals0MFaks5uMWa8gaJpZM4HGj-F>
.
|
FWIW, as @markerikson sort of hinted at regarding plugin frameworks, I've been storing React components, reducers, and middleware in redux state for years using my It works because I don't serialize the features part of the state tree that contains the React components. I just serialize which feature ids were loaded during SSR (these are the unique global ids @gaearon The one downside is it wouldn't work with time traveling. But in all my debugging I've never really found myself craving a time traveling debugger...redux logs are good enough for me. I suppose I could move the non-serializable state into a separate store of sorts with its own context provider. Maybe. It might be a different PITA though? I arrived at this design because having separate global component and reducer lookup tables would be a lot more cumbersome to coordinate with async chunk loading. |
Hi,
I have been trying to store a react component inside a reducer for a project I am working on. I want to know if it is ok to do so and how would I approach it.
I tried to do it, but it loses some functionality inside the reducer.
A react component would look something like this:
However, after I store it inside a reducer, it loses its properties and ends looking something like this:
The text was updated successfully, but these errors were encountered: