♻️ 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.

You can use Reflex with Roact on the client with @rbxts/roact-reflex, or use it to manage your game's state on the server.

📦 Installation

This package is available for Roblox TypeScript and Wally.

npm install @rbxts/reflex
yarn add @rbxts/reflex
pnpm add @rbxts/reflex

📚 Quick Start

Take me to the documentation →

⚡️ Start using Reflex

Where Rodux uses stores, reducers, and actions, Reflex revolves around actions and producers. Create a producer with an initial state and a set of actions, and you're ready to go.

import { createProducer } from "@rbxts/reflex";

interface State {
	count: number;
}

const initialState: State = {
	count: 0,
};

const producer = createProducer(initialState, {
	increment: (state) => ({ ...state, count: state.count + 1 }),
	reset: (state) => ({ ...state, count: 0 }),
});

✨ Use your producer anywhere

Reflex was designed to make managing your state simple and straightforward. Dispatch actions by calling the action directly, and read & subscribe to state with selectors.

const selectCount = (state: State) => state.count;

producer.subscribe(selectCount, (count) => {
	print(`The count is now ${count}`);
});

producer.increment(); // The count is now 1

⚛️ Roact Reflex

The official bindings for Reflex and Roact Hooked are available under @rbxts/roact-reflex. Currently, there is no support for Luau projects.

See the source code on GitHub →

⚙️ Components

Roact Reflex allows you to use your root producer from Roact function components. It exposes a component that you can use to specify the producer for Hooks to use:

• <ReflexProvider> enables Reflex Hooks for a producer.

Roact.mount(
	<ReflexProvider producer={producer}>
		<App />
	</ReflexProvider>,
	playerGui,
);

🪝 Context Hooks

You can use Hooks to read and subscribe to state, or to dispatch actions. Use these Hooks in function components that are wrapped in a <ReflexProvider>.

Use these Hooks to access the root producer and dispatch actions:

• useProducer lets components read and dispatch actions to the root producer.

function Button() {
    const { increment } = useProducer();
    // ...

🪝 State Hooks

Use these Hooks to read and subscribe to state:

• useSelector lets a component subscribe to a Reflex producer.
• useSelectorCreator lets you call useSelector with a selector factory.

function Counter() {
    const count = useSelector((state) => state.count);
    // ...

📝 License

Reflex is licensed under the MIT License.