@rbxts/roact-rodux-hooked

Useful hooks for Rodux with roact-hooked

🔌 This library only exists for use with roact-hooked

⚡ Compatible with roselect

📚 Types from @types/react-redux

✋🏾 This is a work in progress!

Usage

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

const Counter = hooked(() => {
  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()),
      }}
    />
  );
});

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

function App() {
  return (
    <Provider store={store}>
      ...
    </Provider>
  );
}

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

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;