Roact Reflex

Reflex offers bindings for Roact and Roact Hooked that allow you to use Hooks to read and dispatch actions to a Reflex producer from a component.

---

Quick Start

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 →

npm

Terminal

npm install @rbxts/roact-reflex

Yarn

Terminal

yarn add @rbxts/roact-reflex

pnpm

Terminal

pnpm add @rbxts/roact-reflex

---

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);
    // ...

---

Guides

📄️ Using the Producer

Learn how to use the useProducer hook to dispatch actions.

📄️ Selecting State

Learn how to use the useSelector and useSelectorCreator hook to subscribe to state.