{"id":"littensy/reflex","name":"reflex","scope":"littensy","platform":"roblox","description":"A state container built for Roblox","version":"4.3.1","latest":"4.3.1","versions":["3.0.1","3.1.0","3.1.1","3.1.2","3.1.3","3.1.4","3.2.0","3.2.1","3.3.0","3.4.0","3.5.0","4.0.0","4.1.0","4.2.0","4.2.2","4.3.1"],"license":"MIT","licenseRating":"safe","licenseCaveats":[],"licenseVerified":true,"dependencies":{"evaera/promise":{"version":"^4.0.0","alias":"Promise"}},"integrity":"1cbc343695e94404147977b452ca952acf03373f36b1dc88b43b0100ffd40a33","likes":0,"downloads":1,"install":"forest install littensy/reflex","url":"https://forest.dev/p/roblox/littensy/reflex","files":"https://api.forest.dev/ai/package/roblox/littensy/reflex/files","readme":"
\n\n---\n\n \n\n## ♻️ Reflex\n\n**Reflex** is a simple state container inspired by [Rodux](https://github.com/roblox/rodux) and [Silo](https://github.com/sleitnick/rbxts-silo), designed to be an all-in-one solution for managing and reacting to state in Roblox games.\n\nYou can use Reflex with Roact on the client with [`@rbxts/roact-reflex`](https://npmjs.com/package/@rbxts/roact-reflex), or use it to manage your game's state on the server.\n\n \n\n## 📦 Installation\n\nThis package is available for Roblox TypeScript and [Wally](https://wally.run/package/littensy/reflex).\n\n```bash\nnpm install @rbxts/reflex\nyarn add @rbxts/reflex\npnpm add @rbxts/reflex\n```\n\n \n\n## 📚 Quick Start\n\n[Take me to the documentation →](https://littensy.github.io/reflex)\n\n### ⚡️ Start using Reflex\n\nWhere Rodux uses stores, reducers, and actions, Reflex revolves around **actions** and [**producers**](https://littensy.github.io/reflex/docs/reference/reflex/producer). Create a producer with an initial state and a set of actions, and you're ready to go.\n\n```ts\nimport { createProducer } from \"@rbxts/reflex\";\n\ninterface State {\n\tcount: number;\n}\n\nconst initialState: State = {\n\tcount: 0,\n};\n\nconst producer = createProducer(initialState, {\n\tincrement: (state) => ({ ...state, count: state.count + 1 }),\n\treset: (state) => ({ ...state, count: 0 }),\n});\n```\n\n### ✨ Use your producer anywhere\n\nReflex was designed to make managing your state simple and straightforward. Dispatch actions by calling the action directly, and read & subscribe to state with selectors.\n\n```ts\nconst selectCount = (state: State) => state.count;\n\nproducer.subscribe(selectCount, (count) => {\n\tprint(`The count is now ${count}`);\n});\n\nproducer.increment(); // The count is now 1\n```\n\n \n\n## ⚛️ Roact Reflex\n\nThe official bindings for Reflex and Roact Hooked are available under [`@rbxts/roact-reflex`](https://www.npmjs.com/package/@rbxts/roact-reflex). Currently, there is no support for Luau projects.\n\n[See the source code on GitHub →](https://github.com/littensy/roact-reflex)\n\n### ⚙️ Components\n\nRoact 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:\n\n- [``](https://littensy.github.io/reflex/docs/reference/roact-reflex/reflex-provider) enables Reflex Hooks for a producer.\n\n```tsx\nRoact.mount(\n\t\n\t\t\n\t,\n\tplayerGui,\n);\n```\n\n### 🪝 Context Hooks\n\nYou can use Hooks to read and subscribe to state, or to dispatch actions. Use these Hooks in function components that are wrapped in a [``](https://littensy.github.io/reflex/docs/reference/roact-reflex/reflex-provider).\n\nUse these Hooks to access the root producer and dispatch actions:\n\n- [`useProducer`](https://littensy.github.io/reflex/docs/reference/roact-reflex/use-producer) lets components read and dispatch actions to the root producer.\n\n```tsx\nfunction Button() {\n const { increment } = useProducer();\n // ...\n```\n\n### 🪝 State Hooks\n\nUse these Hooks to read and subscribe to state:\n\n- [`useSelector`](https://littensy.github.io/reflex/docs/reference/roact-reflex/use-selector) lets a component subscribe to a Reflex producer.\n- [`useSelectorCreator`](https://littensy.github.io/reflex/docs/reference/roact-reflex/use-selector-creator) lets you call `useSelector` with a [selector factory](https://littensy.github.io/reflex/docs/reference/reflex/create-selector#selector-factories).\n\n```tsx\nfunction Counter() {\n const count = useSelector((state) => state.count);\n // ...\n```\n\n \n\n## 📝 License\n\nReflex is licensed under the [MIT License](LICENSE.md).\n","readmeTruncated":false}
![\"Reflex\"](\"public/logo.png\"){kind=logo}
\n\t\n\t