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?
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 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.
Why react redux store state lost when page reload or refresh?
Please explain in detail is it obvious or should it persistent across the global applications
That's normal JavaScript behavior. A Redux store is just a normal JS variable, and all JS values are thrown away when a page is refreshed.
You can manually persist data from the Redux store using something like localStorage, but you have to specifically choose to do so.
Assuming I want to reuse a component with redux, what are my options?
In more detail:
Let's assume I have a generic list component with items and filter input. I want to use this component in 2 places. The component needs to be closed API, meaning it should dispatch and reduce the actions all within itself. It needs to handle state changes and show the filtered items as well.
Let's assume the reducers are exposed publicly to build the store.
What would be the best approach of building the state object, the reducer and the action.
The main issue is how to 'bind' each component to a different items property on the store state.
Update:
Here is a discussion very similar to my qiestion:
Using Redux in reusable React component. I commented on the discussion with a proposal I found. If it will be accepted I will post it here. Meanwhile you can answer my question with your proposals.
I'm new to Redux, and haven't tried the library yet, but MrEfrem/redux-fly seems to me as a very interesting answer to this problem.
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.