Using Rodux and Roact

Help and Feedback Scripting Support
#1

I’m very confused on how to use Rodux with Roact. I am already kind of familiar with roact but this time i have more ambitious goals. A more stateful UI , I am trying to create a Inventory of current Items you have. I already have all the code for the inventory bit. I just need to make the Roact side of it.

My goals
Have the UI update every time the Inventory changed, I have a remote event for that fires every time it changes. I just need a way of Roact and Rodux seeing that updating the state then re render the inventory GUI.

Any help is appreciated :slight_smile:

#2

Have you considered using a Roact binding instead of Rodux? You could simply create one for the inventory:

local binding, updateBinding = Roact.createBinding("Hello, World!");
--// "Hello, World" is it's first value, of course this could be anything

Then assign any properties to the binding:

local function MyComponent()
    return Roact.createElement("Frame", nil, {
        TextLabel = Roact.createElement("TextLabel", {
            Text = binding;
            --// bindings have a map method which allows you to mutate the value with a function if needbe
        })
    });
end

And of course update it on the RemoteEvent OnClientEvent:

remoteEvent.OnClientEvent:Connect(updateBinding); 
--// The new value would be passed as the first argument

I find bindings to be more useful for the state rather than any library.

If you really wanted to use Rodux, take a look at Roact-Rodux.

1 Like