Reflex

---

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

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

📚 Quick Start

Take me to the documentation →

$3

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.

`ts
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 }),
});
`

$3

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.

`ts
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 →

$3

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:

- enables Reflex Hooks for a producer.

`tsx
Roact.mount(


,
playerGui,
);
`

$3

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 .

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

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

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

$3

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.

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

📝 License

Reflex is licensed under the MIT License.