@rbxts/reflex v4.3.1
♻️ 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 calluseSelector
with a selector factory.
function Counter() {
const count = useSelector((state) => state.count);
// ...
📝 License
Reflex is licensed under the MIT License.
10 months ago
10 months ago
10 months ago
10 months ago
5 months ago
7 months ago
10 months ago
10 months ago
5 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago