{"id":"solarhorizon/rodux-hooks","name":"rodux-hooks","scope":"solarhorizon","platform":"roblox","description":"Roact hooks for Rodux","version":"0.3.1","latest":"0.3.1","versions":["0.1.0","0.2.0","0.2.1","0.2.2","0.3.0","0.3.1"],"license":"MIT","licenseRating":"safe","licenseCaveats":[],"licenseVerified":true,"dependencies":{"roblox/roact":{"version":"~1.4.0","alias":"Roact"}},"integrity":"aebbdaae7c97c4a5f0b7302fcf76a22f34c05d317645775e14ca215053168371","likes":0,"downloads":0,"install":"forest install solarhorizon/rodux-hooks","url":"https://forest.dev/p/roblox/solarhorizon/rodux-hooks","files":"https://api.forest.dev/ai/package/roblox/solarhorizon/rodux-hooks/files","readme":"# rodux-hooks\n\nA very simple bridge between Roact and Rodux via [roact-hooks](https://github.com/Kampfkarren/roact-hooks), inspired by [react-redux](https://react-redux.js.org/api/hooks).\n\n# API\n\n## Provider\n\nAccesses your store via the `store` prop and makes it available to all of its children. Optionally takes a `context` prop if you're using a custom context.\n\n```lua\nlocal function app(props, hooks)\n    return e(RoduxHooks.Provider, {\n        store = store,\n    }, {\n        -- your app goes here\n    })\nend\n```\n\n## useSelector\n\nThis is the primary way to get data from a Rodux store with rodux-hooks. Multiple useSelector hooks can be used in the same component.\n\nBy default, useSelector will directly compare the previous value returned by `selector` to the most recent one. When the old and new values are not equal, the component will be re-rendered with the updated state. You can optionally pass a function to `equalityFn` for finer control over this.\n\n```lua\nuseSelector(\n    hooks: RoactHooks,\n    selector: (state: table),\n    equalityFn: ((oldState: table, newState: table) -> boolean)?\n) -> any\n```\n\n### Example\n\n```lua\nlocal function ExampleLabel(props, hooks)\n    local money = RoduxHooks.useSelector(hooks, function(state)\n        return state.money\n    end)\n\n    return e(\"TextLabel\", {\n        AnchorPoint = Vector2.new(0.5, 0.5),\n        Position = UDim2.fromScale(0.5, 0.5),\n        Size = UDim2.fromOffset(100, 50),\n        Text = \"Money: \" .. money,\n    })\nend\n```\n\n## useDispatch\n\nReturns the dispatch function of your Rodux store.\n\n```lua\nuseDispatch(hooks: RoactHooks) -> dispatch\n```\n\n```lua\nlocal function ExampleButton(props, hooks)\n    local dispatch = RoduxHooks.useDispatch(hooks)\n\n    return e(\"TextButton\", {\n        AnchorPoint = Vector2.new(0.5, 0.5),\n        Position = UDim2.fromScale(0.5, 0.5),\n        Size = UDim2.fromOffset(100, 50),\n        Text = \"Click me for free money!\",\n\n        [Roact.Event.Activate] = function()\n            dispatch({\n                type = \"moneyAdded\",\n                amount = 100,\n            })\n        end,\n    })\nend\n```\n\n## useStore\n\nReturns the Rodux store. You will probably rarely ever need to use this.\n\n```lua\nuseStore(hooks: RoactHooks) -> RoduxStore\n```\n\n## shallowEqual\n\nDoes a shallow comparison of two values (usually tables). This is included as a helper function to be used with useSelector.\n\n```lua\nshallowEqual(x: any, y: any) -> boolean\n```\n\n# Custom Context API\n\nThese functions are exposed in the event that you are using a custom context. You would probably only need to do this if you were using more than one store, which is generally frowned upon in Rodux.\n\n## useCustomSelector\n\nLike useSelector, but accepts a custom context.\n\n```lua\nuseCustomSelector(\n    hooks: RoactHooks,\n    selector: (state: table),\n    equalityFn: ((oldState: table, newState: table) -> boolean)?,\n    customContext: RoactContext\n) -> any\n```\n\n## useCustomDispatch\n\nLike useDispatch, but accepts a custom context.\n\n```lua\nuseCustomDispatch(\n    hooks: RoactHooks,\n    customContext: RoactContext\n) -> dispatch\n```\n\n## Example\n\n```lua\nlocal CustomContext = Roact.createContext()\n\nlocal function app(props, hooks)\n    return e(RoduxHooks.Provider, {\n        store = store,\n        context = CustomContext,\n    }, {\n        -- a bunch of components\n    })\nend\n\n-- A component that is a descendant of `app`\nlocal function YetAnotherExample(props, hooks)\n    local value = RoduxHooks.useCustomSelector(hooks, selector, equalityFn, CustomContext)\n    local dispatch = RoduxHooks.useCustomDispatch(hooks, CustomContext)\n\n    -- your component here\nend\n```\n","readmeTruncated":false}