Roact Reflex

The official bindings for Reflex and Roact Hooked are available under @rbxts/roact-reflex.

Luau is not supported by Roact Hooked or Roact Reflex.

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.
  • Setting up Roact Reflex
  • Using other providers with ReflexProvider

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

---

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

Context Hooks

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

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

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.
  • Subscribing to a producer's state
  • Custom equality comparison
  • Using selectors with curried arguments
• useSelectorCreator lets you call useSelector with a selector factory.
  • Subscribing to state with selector factories

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