I'm trying to write module UI components that can be imported and used by any container that wants it. The tool I'm writing allows a user to click on an element and the information of the element should display on a seperate panel, this feels like an obvious case of using redux to update an element-key value in the store whenever a click action is used which will update the display panel.
However, I'm not certain how to use the store. If I was writing this as part of an app I would create a reducer for the component then manually add that reducer to my reducers.js file (created by reduxbootstrap) and magic would happen. However, as a component I expect to import into multiple other apps I would prefer not to require each app to have to import the reducer and manually add it to their list of reducers for the component to work.
Is there a cleaner way of getting my component to plug and play with an existing store? Ideally I want someone to be able to import it and use it immediately in their UI.
The one way I know that would work is to not use redux at all, i could make the interaction work internally to the component without using redux stores at all, but it feels odd to intentionally write a non-redux component to be used in a redux app.
I don't think there is a way without you exposing your reducer to be included manually in the app root reducer. A lot of popular libraries like redux-form and react-router-redux follow this approach which I think it gives the app developers more control over their redux store.
Related
I have a react component I'm importing into my project. Both my main project and the component use separate redux stores. Initially the component was just imported once and this had no issue, but when it's imported twice it uses the same redux store for both children.
How do I ensure that two imported children from the same library, that use redux, each use a separate redux store? Alternatively, what's a better solution? I tried trying to refactor how the store is used but didn't have much luck.
In the log I can see that the redux store is initialized only once on page load.
Redux is a global store. It is meant to be used as one store per application. While there are ways around that, documented here under "custom context", it is highly advised not to do that.
If you are using the same component twice with the same props, it should also use exactly the right data. If that is not the case, you likely should not be using a global state from the beginning, but keep that state as component-local state in those two components.
I'm trying to embed react-admin into another redux application. The docs outline how to do this here. However, the main app located here uses configureStore rather than createStore. Moreover, createStore in the react-admin docs passes in state i.e., the store appears to be dynamically initialized every render based on state variables. What's the best way to integrate react-admin in this case?
What's the company standard? If a company decides to adopt Redux, do I need to convert every state/prop into redux form?
For example. I have a loading/setLoading state for the home page. Can't see if being used in other places. Do I need to make a redux version of actions for it?
No, as stated in the Redux style guide (general reading recommendation!), you should Evaluate Where Each Piece of State Should Live.
Not everything needs (or even should) be global data. Only use Redux for stuff that is "global". It does not replace props or local component state!
I am not sure if I am missing something within the Next.js documentation, but it seems as if it is unfeasible to reuse components within a Next.js application without breaking the component.
So from my understanding:
Next.js uses SSR to fetch data at a pages level by either getStaticProps, getStaticPaths or getServerSideProps.
Once this data has been fetched it is returned to the page via props.
The page then has access to the props and can then handle this data however it wants.
In order to use the SSR techniques for child components of our page we have to grab the child components data at page level and then pass this data down to our components.
This raises some concerns for me and questions:
This means our children components always have a dependency on the parent page?
We can't reuse our components on other pages without repeating logic or breaking components?
How do I reuse components without client side rendering?
Could I just grab everything at the entry point of the app and then store this in various state variables using Redux and call them at component level when needed?
By using client side rendering it sort of defeats the purpose of using Next.js. Yes, I can just use a useEffect hook to grab the data at component level but this doesn't seem right to me.
Am I missing something in the architectural pattern or is this just a vulnerability when working with Next.js?
The more I think about this the more I realise Relay and GraphQL are the future.
When using Redux with React we're able to use react-redux which internally uses React's context API to make the store available to all HoCs created with connect.
I'm playing around with Web Components to evaluate how feasible it is to use primarily Web Components for building your application but still wanted a way to deal with state management (in Polymer they recommed using the mediator pattern and Redux is a type of global mediator).
So far I'm able to have a component create the store and pass it to a child component to use. This has the limitation that I will need to pass around the store to every container component, and even pass it through presentational components if they need to then pass it to another container.
So what I want to achieve is a way to make the store available to all container components that live under the Store component in the tree, preferably without making the store a global variable.
I imagined creating something similar to the react-redux connect component but since that one relies on React context I'm trying to find ideas for how to create a shared object.
Wrapping your class in an iife function and declaring a variable outside of the scope of the class as well as assigning a property of the class to the external variable will create a singleton mechanism for sharing data between instances of an element. You would then include that element inside of the template of any other element and bind to it normally. Here's an example: https://github.com/firmfirm/f-singleton/blob/master/f-singleton.html