createTypedHooks

Creates typed versions of the hooks so that you don't need to apply typing information against them when using them within your components.

The returned object includes typed versions of every public Easy Peasy hook:

• useStoreActions
• useStoreDispatch
• useStoreState
• useStoreRehydrated
• useStoreTransition
• useStoreDeferredState
• useStoreOptimistic
• useStore

Example

// hooks.js
import { createTypedHooks } from 'easy-peasy';
import { StoreModel } from './model';

const {
  useStoreActions,
  useStoreState,
  useStoreDispatch,
  useStore,
  useStoreTransition,
  useStoreDeferredState,
  useStoreOptimistic,
  useStoreRehydrated,
} = createTypedHooks<StoreModel>();

export {
  useStoreActions,
  useStoreState,
  useStoreDispatch,
  useStore,
  useStoreTransition,
  useStoreDeferredState,
  useStoreOptimistic,
  useStoreRehydrated,
};

And then use them within your components:

import { useStoreState } from './hooks';  // 👈 import the typed hooks

export default MyComponent() {
  //                          This will be typed
  //                                       👇
  const message = useStoreState(state => state.message);
  return <div>{message}</div>;
}