Reflex for Roact
♻️ Reflex
Reflex is a simple state container inspired by Rodux and Silo, designed to be an all-in-one solution for managing and reacting to state in Roblox games.
This package provides Reflex bindings for Roact using @rbxts/roact-hooked
.
See the full documentation for Reflex here.
📦 Installation
$ npm install @rbxts/roact-reflex
$ pnpm add @rbxts/roact-reflex
📚 Usage
Reflex offers support for @rbxts/roact-hooked
with @rbxts/roact-reflex
. Using roact-reflex hooks requires setting up a ReflexProvider
at the root of your Roact tree.
If you don't want to use generics to get the Producer type you want, Reflex exports the UseSelectorHook
and UseProducerHook
types to make it easier:
export const useRootProducer: UseProducerHook<RootProducer> = useProducer;
export const useRootSelector: UseSelectorHook<RootProducer> = useSelector;
export function App() {
const { increment, decrement } = useRootProducer();
const count = useRootSelector((state) => state.count);
return (
<textbutton
Text={`Count: ${count}`}
AnchorPoint={new Vector2(0.5, 0.5)}
Size={new UDim2(0, 100, 0, 50)}
Position={new UDim2(0.5, 0, 0.5, 0)}
Event={{
Activated: () => increment(),
MouseButton2Click: () => decrement(),
}}
/>
);
}
Roact.mount(
<ReflexProvider producer={producer}>
<App />
</ReflexProvider>,
);
When using selector creators, you should avoid creating them in your render method (i.e. useSelector(selectPlayersOnTeam(redTeam))
), since it creates a new selector every time the component renders and risks excessive re-renders. Instead, you can use the useSelectorCreator()
hook to memoize the selector:
export const selectPlayersOnTeam = (team: Team) => {
return createSelector([selectPlayers] as const, (players) => {
return players.filter((player) => player.Team === team);
});
};
const players = useSelectorCreator(selectPlayersOnTeam, redTeam);
📝 License
Reflex is licensed under the MIT License.