@rbxts/roact-rodux-hooked

Useful hooks for Rodux with roact-hooked

⚙️ This library only exists for use with roact-hooked

🔌 Compatible with roselect

📚 Based on @types/react-redux

Usage

import Roact from "@rbxts/roact";
import { useDispatch, useSelector } from "@rbxts/roact-rodux-hooked";
import { withHooks } from "@rbxts/roact-hooked";
import { Store, StoreState, increment } from "client/store";

function Counter() {
	const count = useSelector((state: StoreState) => state.count);
	const dispatch = useDispatch<Store>();

	return (
		<textbutton
			Text={`Counter: ${count}`}
			BackgroundColor3={Color3.fromRGB(80, 120, 200)}
			Size={new UDim2(0.5, 0, 1, 0)}
			Event={{
				Activated: () => dispatch(increment()),
			}}
		/>
	);
}

export default withHooks(Counter);

import Roact from "@rbxts/roact";
import { StoreProvider } from "@rbxts/roact-rodux-hooked";
import { configureStore } from "./store";

export default function App() {
	return <StoreProvider store={configureStore()}>...</StoreProvider>;
}

import { TypedUseSelectorHook, useDispatch, useSelector, useStore } from "@rbxts/roact-rodux-hooked";
import { RootDispatch, RootState, RootStore } from "./store";

export const useRootStore = useStore as () => RootStore;
export const useRootDispatch = useDispatch as () => RootDispatch;
export const useRootSelector = useSelector as TypedUseSelectorHook<RootState>;