I'm using React and Typescript to create and manage multiple small components on the same static page which works really well so far. I have a few contexts wrapped in a state provider component like this:
ReactDOM.render(
<StateProvider>
<Reps />
</StateProvider>,
document.getElementById("react-reps")
);
ReactDOM.render(
<StateProvider>
<Script />
</StateProvider>,
document.getElementById("react-script")
);
Even though StateProvider is used in both render methods, each one is a separate instance and has independent state.
I'd like to share some of the state between these components, though as I understand it I may have to manually push updates around rather than relying on React (since the updates will transcend the calls to ReactDom.render) but I still can't figure out if there is a canonical way to achieve this. I've been pushing some state around via events which works well for actions the user takes, but is less great for taking action onload because I don't want to rely on timing for which component loads first.
What's the best way to automatically or manually share some state between these two or more components?
Edit: the comment below for how sharing the store from redux is the kind of thing I want to achieve but I would much rather use the contexts I have right now than introduce redux as a dependency. How could this work with contexts?
Try, Redux and React-redux for state management and transferring data between different components. It is handy and professional. It works a bit differently, but once you get then it is very easy to manage.
Related
When I've been developing in pure React.js, I was used to store some data into Redux and set some component to listen to changes in Redux (with useSelector (source). But now I am doing facing the same problem but in different technology. In Remix there's no useSelector with Redux. Yes there is possible to use useState but it have to be under one parent compopnent but I don't have this structure. So is there any solution to force component to re-render when some independent state changes?
Thanks
I've tried to call some function to force re-render but that's not 'nice' solution. I've even thinked about storying data into localStorage/cookies but when they change, components doesn't update (I understand why it doesn't force re-render but I've tried it...).
Redux should still work normally even with Remix, as it's just a state manager. It's entirely possible that all you have is a configuration issue with Redux (I personally dislike Redux for how needlessly complex it into use)
You could try React's own Context for storing state that could be used by several components. Other proven state managers are the likes of jotai or zustand.
Even regular state could work because there's always a root component in remix: i.e. root.tsx.
It's hard to understand what you're trying to achieve. Other ways to update various parts of the UI is using nested routes and . You can access parent and child page data with useLoaderData().
I have a problem and I'm recently researching about Clean Architecture. That is:
I know that when I want to use Redux in React I will have to do like this:
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root') )
and then, I use useSelector and useDispatch (hooks) to select data and dispatch an action... in my react components.
But, I see an problem (in my opinion). That is my react application is highly coupled with this state management tool (redux).
So, if in the future, Redux becomes outdated or I don't want to use redux, I want to use Recoil, MobX or new modern state management tools, etc... Or maybe, in my app, I want to use redux combined with others (Recoil,...) to manage my app state. So, I want a loose coupling between react and redux.
But, I see very few people talking about this issue. Or maybe I was searching for the wrong keywords. Or is there something wrong with my way of thinking about 'Separation of concerns' in react and redux.
Can anyone give me a fresh look at this issue?
PS: My English is not good. I hope everyone can get my issue? Thanks a lot.
I had experience with both main React state managers: Redux and Mobx and struggled with the same question.
One possible solution might be to wrap state manager logic with your custom hooks which will receive redux state and trigger actions.
But if you one day decide to switch to, say, Mobx, you will see that:
Mobx reactivity works in a different way than in redux.
First, you will face the necessity to wrap your components in observer function which adds coupling to your components. Besides, it will take some effort to refactor your components to make it Mobx compatible because Mobx reactivity relies on value dereferencing. You can read about it in Mobx documentation. https://mobx.js.org/understanding-reactivity.html
As i see, you can't make your components fully state-manager-agnostic if they rely on business logic.
Anyway, state receiving and state updating logic will be present in your React components and it will take some time and effort to put your project on the new rails.
The only option i see is to split React components into two types:
Container component.
All state-manager logic goes here. It receives application state chunks, triggers actions, and passes props to UI-components.
UI-component
Component that builds DOM-elements. It may have its own state, but mainly render logic is based on component props.
This will allow you to reduce costs from changing state-manager in the future, because you can gradually rewrite your container components without worrying too much about UI.
My application depends mainly on one async method: my get-all-images function. And my app have like some components that will affect this method (ex: there's a search button on header, a add component, and a delete component). And I want to know what's the best way to make this function run again. ContextAPI?
This a is schetch of my app:
I think if the app is simple, it would be faster to do with useContext React Hook. You just put your state and setState in there, and then, get them in whatever component you need. But when your application gets bigger, it's getting hard to track the state and where it is updating. For that reason, there is Redux.
Usually when you have this scenario, a common approach is using what you said, a React ContextAPI, with this you can correlate the components into the main state aid avoiding multiple re-renders with passing props.
Another approach, since your project need to have this "brain state" is to use solutions like recoil , redux or mobx to create a flux architecture inside of it and manage better how the components handle each state.
I want to distribute a React App as a React component. Currently it uses Redux to manage its state. If the end user also uses Redux to manage the state, there will be nested Providers. Would it be a problem or should I pass the store as a prop as Dan suggested here? I personally do not like the second way tho.
Thanks a lot
As you're building a component to be consumed like any other black-box components, using redux internally and your own <Provider> is a fine option.
This will hide the parent app's store from your component but you don't want to access it anyways; it may not exist. Any data you want must be passed in through your top-level component's props.
Likewise, you don't want the parent-application to get data from your internal Redux store through Redux and you don't want any actions to go through both stores as there could easily be name conflicts and unwanted side effects.
Most people only think of Redux as an application-level state management solution and thus the negative comments. In your case your component is big enough to have a component-wide state management solution, and thus Redux for your component is appropriate.
All that said, I realize this post is several years old, so this answer is for others that stumble across this question (as I did). I would be interested in hearing in a comment what you ended up doing and how it worked out.
React encourages the use of stateless components as much as possible and have a stateful parent component managing them.
I understand that this can make the stateless components more reusable, and easy to manage.
However, to the extreme, we can always put the state at the top level component, like App.js, and pass down information and callbacks through a long props chain. And if using Flux, the actions can always be dispatched in it too (executed through callbacks).
So I'm wondering what's line to separate stateful and stateless components? And if using Flux, where should the Actions to be dispatched?
--- Add an example ---
Say I have a google docs like web app that have a tool bar and displayed content. I imagine we will have the component structure.
<App>
<Toolbar />
<Content />
</App>
The tool bar has buttons that will affect the display content, say the bold text button.
So should the App pass down onButtonPressed callback props to Toolbar and dispatch Actions in itself, or should let the Toolbar to do it itself?
Should the App pass down contentString props to Content, or let Content itself listen to Store changes?
Thanks!
From my point of view, a simple application could use the pattern of Flux in that way :
Children emit actions.
The application listens to stores and propagates processed data to his children.
With that approach, you have the stateless component, but with a good code organisation without the callback props. But both of your propositions are also correct, it's a decision that you make regarding the size and needs of your application.
If the component that you build will be used outside of your application, don't use flux as much as possible and let the developer choose the wanted approach for his needs.
It's a good question, and it is being solved differently even between different Flux implementations.
I prefer having my state in one high-level component, that sees the "big picrure", and propagate data using props to all the low-level ones. In a good React app, most of the components shouldn't "care" where the data is coming from.
Having a one good structured model instead of several fragmented ones also proves itself to be beneficial so far. (by the way, that can be achieved even using several stores, the high-level component could listen to all of them, and virtually "hold" this big model).
Regarding actions - I prefer having all my "dumb" visualization/ui/display components work with callback props. That way it is easier to re-use them, and it is a good separation of concerns.
In richer components that hold a bit of business logic, I call Reflux actions directly. Usually those are also container components themselves to aforementioned "dumb" ui controllers.
So bottom line - data should flow from as high as possible, actions can be fired from lower components, but always check whether you can achieve the same result with callback props.
To your question - the Toolbar is a complex enough component to have ToolbarActions of its own and call them directly. But the Content component should definitely get its data from above. It's also easier to reason the data flow that way, when the app gets complicated.
Hope that helps. The whole Flux thing is still an art in progress...