Properly use Flamework with React
Hey!
I am using these 2 and I am wondering what is a good or the good way to make them work together properly.
Because I assume a react gui would have a controller related but how do you make interaction between the 2, like how does the controller can affect the gui?
Solution:Jump to solution
for example, you have a volume setting (a value from 0 to 1), the provider receives this value from the server, passes it to the view, when the client presses the volume up button, the view calls the OnChangeVolume function (which was passed through Props), passing a new value, inside this function the provider does all sorts of manipulations and passes the new value back to the view
44 Replies
I wouldn't bind react gui to flamework controllers
such a gui will be hard to test
I see so how do you handle logic like maybe loading data when opening gui? Or just opening gui
the loading window is implemented in the following way: I pass promises to the react component, which are processed in useAsyncEffect, and then I generate these promises from the outside using a separate controller
that is, the react component itself is not tied to anything and can be used in any other way
I am not sure to get it, you still use a controller?
I use a separate controller to get an array of promises, then pass this array to the react element, all this happens in another controller, which is responsible for mounting the gui
I call it GuiController, LoadingController
ok and does it have any control on the lifecycle of the gui like closing it or any action on it? And if yes how?
do you mean the skip download button?
oh I think there is a confusion, I meant loading data on the gui like settings or anything else like just opening it
For example?
I didn't understand you
let's you have a settings gui, so you must get them when opening it and there is buttons to change them. How can you bind logic to this button in the context of flamework and react
so I assumed it needs a controller looking on the react gui to ask the server....
in the react component you pass callbacks to Props, which the component will call itself under certain conditions (pressing buttons, etc.)
are you using atom for data replication?
not for the moment but I am planning to
the main idea is that you create atoms on the server and the client and synchronize them with your event, the client can push this atom into the react tree and subscribe to date changes
but here I use one rule
I make a View component and a provider on top of it
The view component is responsible for displaying the data that is passed to it in Props and that's it.
provider is responsible for first getting this data (from atom or flamework components) and then passing this data to the view component
thanks to this you can separately test the view component in UILabs for example
so a provider would still be a react component?
yes
sorry I am understanding the logic but I can't imagine it in react, do you have any examples?
Yes, sure
for example I have LobbyInfoView, this gui is designed for players' lobbies, it accepts data like this
the component itself does not obtain the data, it expects that someone from outside will give it to it
here is the provider component, which gets data from the server via atom and passes it to the view component
is useAppSelector the hook that gets the data from the atom?
yes
there can be any other code here that receives data from the server
ok I understand this thanks i'll do that. But I still have something I don't understand, how do you give props callback or define atom to listen on if your gui is probably under a App component
useAppSelector has useState underneath it, which as you should know calls re-render, the value of this state is changed by listening to the atom itself, which is taken from the react context
yeah I understand this workflow but I don't understand how does it gets it, because let's say the atom is from an object like GameData which means it needs to be injected to the component, how?
all this happens through react context
you create a new context, then wrap all the other elements of your gui in it
then in components use useContext
ok I didn't know about the concept of context in react, and so this context could be modify by a controller?
react component that creates the context provider may have states that may change, which will lead to re-render of all child components, I do not advise you to do this because it can potentially reduce performance
you can put a local atom in the context, to which child components will subscribe and re-render will be called only for them, and not for the entire tree
the context itself is also an element that stores the transferred data; when re-render is called, the context is recreated, receiving other data as input
it turns out that you don't change the context data, you recreate it
ok I see
along with the rest of the child components
so it would not be a good solution to define callback from a controller? Because I am still lost on what is defining which atom or callback are used in the component
As I understood components are defined under App component generally, but so how would define callbacks or atoms that would interact with the rest of the system/program
as I wrote above, create separate react components that will be a provider between your system and view components
I understand this separation of responsibilities but I don't get how does the provider has for example the callback that go get the settings or the atom of settings
the view component can accept functions that will subsequently be called by the view component and the provider changes its data, passing it to the view via state or bindings
yes but how does the provider gets this callback/data?
maybe is there some open projects that work like that as examples?
Solution
for example, you have a volume setting (a value from 0 to 1), the provider receives this value from the server, passes it to the view, when the client presses the volume up button, the view calls the OnChangeVolume function (which was passed through Props), passing a new value, inside this function the provider does all sorts of manipulations and passes the new value back to the view
ok I see, I think what I was thinking wrong is that I was dissociating the ui from a controller when mounting it, so that's why I was not understanding how to link both
I was just mounting it in a simple script
I also recommend you to use
pretty-react-hooks libraryyes I am
Thanks a LOT for your time, I think I understand enough to try and I will use your beautiful roblox-ts template as help. Have a good day!
you are welcome, I recently updated it to the current version