@rbxts/roact-reflex

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.