react-saga-redux 1.0.1

package/src/hooks/useDispatch.ts

@@ -0,0 +1,104 @@
+import type { Context } from 'react'
+import type { Action, Dispatch, UnknownAction } from 'redux'
+
+import type { ReactReduxContextValue } from '../components/Context'
+import { ReactReduxContext } from '../components/Context'
+import { createStoreHook, useStore as useDefaultStore } from './useStore'
+
+/**
+ * Represents a custom hook that provides a dispatch function
+ * from the Redux store.
+ *
+ * @template DispatchType - The specific type of the dispatch function.
+ *
+ * @since 9.1.0
+ * @public
+ */
+export interface UseDispatch<
+  DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>,
+> {
+  /**
+   * Returns the dispatch function from the Redux store.
+   *
+   * @returns The dispatch function from the Redux store.
+   *
+   * @template AppDispatch - The specific type of the dispatch function.
+   */
+  <AppDispatch extends DispatchType = DispatchType>(): AppDispatch
+
+  /**
+   * Creates a "pre-typed" version of {@linkcode useDispatch useDispatch}
+   * where the type of the `dispatch` function is predefined.
+   *
+   * This allows you to set the `dispatch` type once, eliminating the need to
+   * specify it with every {@linkcode useDispatch useDispatch} call.
+   *
+   * @returns A pre-typed `useDispatch` with the dispatch type already defined.
+   *
+   * @example
+   * ```ts
+   * export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+   * ```
+   *
+   * @template OverrideDispatchType - The specific type of the dispatch function.
+   *
+   * @since 9.1.0
+   */
+  withTypes: <
+    OverrideDispatchType extends DispatchType,
+  >() => UseDispatch<OverrideDispatchType>
+}
+
+/**
+ * Hook factory, which creates a `useDispatch` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useDispatch` hook bound to the specified context.
+ */
+export function createDispatchHook<
+  StateType = unknown,
+  ActionType extends Action = UnknownAction,
+>(
+  // @ts-ignore
+  context?: Context<ReactReduxContextValue<
+    StateType,
+    ActionType
+  > | null> = ReactReduxContext,
+) {
+  const useStore =
+    context === ReactReduxContext ? useDefaultStore : createStoreHook(context)
+
+  const useDispatch = () => {
+    const store = useStore()
+    return store.dispatch
+  }
+
+  Object.assign(useDispatch, {
+    withTypes: () => useDispatch,
+  })
+
+  return useDispatch as UseDispatch<Dispatch<ActionType>>
+}
+
+/**
+ * A hook to access the redux `dispatch` function.
+ *
+ * @returns {any|function} redux store's `dispatch` function
+ *
+ * @example
+ *
+ * import React, { useCallback } from 'react'
+ * import { useDispatch } from 'react-redux'
+ *
+ * export const CounterComponent = ({ value }) => {
+ *   const dispatch = useDispatch()
+ *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
+ *   return (
+ *     <div>
+ *       <span>{value}</span>
+ *       <button onClick={increaseCounter}>Increase counter</button>
+ *     </div>
+ *   )
+ * }
+ */
+export const useDispatch = /*#__PURE__*/ createDispatchHook()

package/src/hooks/useReduxContext.ts

@@ -0,0 +1,42 @@
+import { React } from '../utils/react'
+import { ReactReduxContext } from '../components/Context'
+import type { ReactReduxContextValue } from '../components/Context'
+
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
+ */
+export function createReduxContextHook(context = ReactReduxContext) {
+  return function useReduxContext(): ReactReduxContextValue {
+    const contextValue = React.useContext(context)
+
+    if (process.env.NODE_ENV !== 'production' && !contextValue) {
+      throw new Error(
+        'could not find react-redux context value; please ensure the component is wrapped in a <Provider>',
+      )
+    }
+
+    return contextValue!
+  }
+}
+
+/**
+ * A hook to access the value of the `ReactReduxContext`. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @returns {any} the value of the `ReactReduxContext`
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useReduxContext } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const { store } = useReduxContext()
+ *   return <div>{store.getState()}</div>
+ * }
+ */
+export const useReduxContext = /*#__PURE__*/ createReduxContextHook()

package/src/hooks/useSelector.ts

@@ -0,0 +1,286 @@
+//import * as React from 'react'
+import { React } from '../utils/react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
+import type { ReactReduxContextValue } from '../components/Context'
+import { ReactReduxContext } from '../components/Context'
+import type { EqualityFn, NoInfer } from '../types'
+import {
+  createReduxContextHook,
+  useReduxContext as useDefaultReduxContext,
+} from './useReduxContext'
+
+/**
+ * The frequency of development mode checks.
+ *
+ * @since 8.1.0
+ * @internal
+ */
+export type DevModeCheckFrequency = 'never' | 'once' | 'always'
+
+/**
+ * Represents the configuration for development mode checks.
+ *
+ * @since 9.0.0
+ * @internal
+ */
+export interface DevModeChecks {
+  /**
+   * Overrides the global stability check for the selector.
+   * - `once` - Run only the first time the selector is called.
+   * - `always` - Run every time the selector is called.
+   * - `never` - Never run the stability check.
+   *
+   * @default 'once'
+   *
+   * @since 8.1.0
+   */
+  stabilityCheck: DevModeCheckFrequency
+
+  /**
+   * Overrides the global identity function check for the selector.
+   * - `once` - Run only the first time the selector is called.
+   * - `always` - Run every time the selector is called.
+   * - `never` - Never run the identity function check.
+   *
+   * **Note**: Previously referred to as `noopCheck`.
+   *
+   * @default 'once'
+   *
+   * @since 9.0.0
+   */
+  identityFunctionCheck: DevModeCheckFrequency
+}
+
+export interface UseSelectorOptions<Selected = unknown> {
+  equalityFn?: EqualityFn<Selected>
+
+  /**
+   * `useSelector` performs additional checks in development mode to help
+   * identify and warn about potential issues in selector behavior. This
+   * option allows you to customize the behavior of these checks per selector.
+   *
+   * @since 9.0.0
+   */
+  devModeChecks?: Partial<DevModeChecks>
+}
+
+/**
+ * Represents a custom hook that allows you to extract data from the
+ * Redux store state, using a selector function. The selector function
+ * takes the current state as an argument and returns a part of the state
+ * or some derived data. The hook also supports an optional equality
+ * function or options object to customize its behavior.
+ *
+ * @template StateType - The specific type of state this hook operates on.
+ *
+ * @public
+ */
+export interface UseSelector<StateType = unknown> {
+  /**
+   * A function that takes a selector function as its first argument.
+   * The selector function is responsible for selecting a part of
+   * the Redux store's state or computing derived data.
+   *
+   * @param selector - A function that receives the current state and returns a part of the state or some derived data.
+   * @param equalityFnOrOptions - An optional equality function or options object for customizing the behavior of the selector.
+   * @returns The selected part of the state or derived data.
+   *
+   * @template TState - The specific type of state this hook operates on.
+   * @template Selected - The type of the value that the selector function will return.
+   */
+  <TState extends StateType = StateType, Selected = unknown>(
+    selector: (state: TState) => Selected,
+    equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>,
+  ): Selected
+
+  /**
+   * Creates a "pre-typed" version of {@linkcode useSelector useSelector}
+   * where the `state` type is predefined.
+   *
+   * This allows you to set the `state` type once, eliminating the need to
+   * specify it with every {@linkcode useSelector useSelector} call.
+   *
+   * @returns A pre-typed `useSelector` with the state type already defined.
+   *
+   * @example
+   * ```ts
+   * export const useAppSelector = useSelector.withTypes<RootState>()
+   * ```
+   *
+   * @template OverrideStateType - The specific type of state this hook operates on.
+   *
+   * @since 9.1.0
+   */
+  withTypes: <
+    OverrideStateType extends StateType,
+  >() => UseSelector<OverrideStateType>
+}
+
+const refEquality: EqualityFn<any> = (a, b) => a === b
+
+/**
+ * Hook factory, which creates a `useSelector` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useSelector` hook bound to the specified context.
+ */
+export function createSelectorHook(
+  context: React.Context<ReactReduxContextValue<
+    any,
+    any
+  > | null> = ReactReduxContext,
+): UseSelector {
+  const useReduxContext =
+    context === ReactReduxContext
+      ? useDefaultReduxContext
+      : createReduxContextHook(context)
+
+  const useSelector = <TState, Selected>(
+    selector: (state: TState) => Selected,
+    equalityFnOrOptions:
+      | EqualityFn<NoInfer<Selected>>
+      | UseSelectorOptions<NoInfer<Selected>> = {},
+  ): Selected => {
+    const { equalityFn = refEquality } =
+      typeof equalityFnOrOptions === 'function'
+        ? { equalityFn: equalityFnOrOptions }
+        : equalityFnOrOptions
+    if (process.env.NODE_ENV !== 'production') {
+      if (!selector) {
+        throw new Error(`You must pass a selector to useSelector`)
+      }
+      if (typeof selector !== 'function') {
+        throw new Error(`You must pass a function as a selector to useSelector`)
+      }
+      if (typeof equalityFn !== 'function') {
+        throw new Error(
+          `You must pass a function as an equality function to useSelector`,
+        )
+      }
+    }
+
+    const reduxContext = useReduxContext()
+
+    const { store, subscription, getServerState } = reduxContext
+
+    const firstRun = React.useRef(true)
+
+    const wrappedSelector = React.useCallback<typeof selector>(
+      {
+        [selector.name](state: TState) {
+          const selected = selector(state)
+          if (process.env.NODE_ENV !== 'production') {
+            const { devModeChecks = {} } =
+              typeof equalityFnOrOptions === 'function'
+                ? {}
+                : equalityFnOrOptions
+            const { identityFunctionCheck, stabilityCheck } = reduxContext
+            const {
+              identityFunctionCheck: finalIdentityFunctionCheck,
+              stabilityCheck: finalStabilityCheck,
+            } = {
+              stabilityCheck,
+              identityFunctionCheck,
+              ...devModeChecks,
+            }
+            if (
+              finalStabilityCheck === 'always' ||
+              (finalStabilityCheck === 'once' && firstRun.current)
+            ) {
+              const toCompare = selector(state)
+              if (!equalityFn(selected, toCompare)) {
+                let stack: string | undefined = undefined
+                try {
+                  throw new Error()
+                } catch (e) {
+                  // eslint-disable-next-line no-extra-semi
+                  ;({ stack } = e as Error)
+                }
+                console.warn(
+                  'Selector ' +
+                    (selector.name || 'unknown') +
+                    ' returned a different result when called with the same parameters. This can lead to unnecessary rerenders.' +
+                    '\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization',
+                  {
+                    state,
+                    selected,
+                    selected2: toCompare,
+                    stack,
+                  },
+                )
+              }
+            }
+            if (
+              finalIdentityFunctionCheck === 'always' ||
+              (finalIdentityFunctionCheck === 'once' && firstRun.current)
+            ) {
+              // @ts-ignore
+              if (selected === state) {
+                let stack: string | undefined = undefined
+                try {
+                  throw new Error()
+                } catch (e) {
+                  // eslint-disable-next-line no-extra-semi
+                  ;({ stack } = e as Error)
+                }
+                console.warn(
+                  'Selector ' +
+                    (selector.name || 'unknown') +
+                    ' returned the root state when called. This can lead to unnecessary rerenders.' +
+                    '\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.',
+                  { stack },
+                )
+              }
+            }
+            if (firstRun.current) firstRun.current = false
+          }
+          return selected
+        },
+      }[selector.name],
+      [selector],
+    )
+
+    const selectedState = useSyncExternalStoreWithSelector(
+      subscription.addNestedSub,
+      store.getState,
+      getServerState || store.getState,
+      wrappedSelector,
+      equalityFn,
+    )
+
+    React.useDebugValue(selectedState)
+
+    return selectedState
+  }
+
+  Object.assign(useSelector, {
+    withTypes: () => useSelector,
+  })
+
+  return useSelector as UseSelector
+}
+
+/**
+ * A hook to access the redux store's state. This hook takes a selector function
+ * as an argument. The selector is called with the store state.
+ *
+ * This hook takes an optional equality comparison function as the second parameter
+ * that allows you to customize the way the selected state is compared to determine
+ * whether the component needs to be re-rendered.
+ *
+ * @param {Function} selector the selector function
+ * @param {Function=} equalityFn the function that will be used to determine equality
+ *
+ * @returns {any} the selected state
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useSelector } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const counter = useSelector(state => state.counter)
+ *   return <div>{counter}</div>
+ * }
+ */
+export const useSelector = /*#__PURE__*/ createSelectorHook()

package/src/hooks/useStore.ts

@@ -0,0 +1,123 @@
+import type { Context } from 'react'
+import type { Action, Store } from 'redux'
+import type { ReactReduxContextValue } from '../components/Context'
+import { ReactReduxContext } from '../components/Context'
+import {
+  createReduxContextHook,
+  useReduxContext as useDefaultReduxContext,
+} from './useReduxContext'
+
+/**
+ * Represents a type that extracts the action type from a given Redux store.
+ *
+ * @template StoreType - The specific type of the Redux store.
+ *
+ * @since 9.1.0
+ * @internal
+ */
+export type ExtractStoreActionType<StoreType extends Store> =
+  StoreType extends Store<any, infer ActionType> ? ActionType : never
+
+/**
+ * Represents a custom hook that provides access to the Redux store.
+ *
+ * @template StoreType - The specific type of the Redux store that gets returned.
+ *
+ * @since 9.1.0
+ * @public
+ */
+export interface UseStore<StoreType extends Store> {
+  /**
+   * Returns the Redux store instance.
+   *
+   * @returns The Redux store instance.
+   */
+  (): StoreType
+
+  /**
+   * Returns the Redux store instance with specific state and action types.
+   *
+   * @returns The Redux store with the specified state and action types.
+   *
+   * @template StateType - The specific type of the state used in the store.
+   * @template ActionType - The specific type of the actions used in the store.
+   */
+  <
+    StateType extends ReturnType<StoreType['getState']> = ReturnType<
+      StoreType['getState']
+    >,
+    ActionType extends Action = ExtractStoreActionType<Store>,
+  >(): Store<StateType, ActionType>
+
+  /**
+   * Creates a "pre-typed" version of {@linkcode useStore useStore}
+   * where the type of the Redux `store` is predefined.
+   *
+   * This allows you to set the `store` type once, eliminating the need to
+   * specify it with every {@linkcode useStore useStore} call.
+   *
+   * @returns A pre-typed `useStore` with the store type already defined.
+   *
+   * @example
+   * ```ts
+   * export const useAppStore = useStore.withTypes<AppStore>()
+   * ```
+   *
+   * @template OverrideStoreType - The specific type of the Redux store that gets returned.
+   *
+   * @since 9.1.0
+   */
+  withTypes: <
+    OverrideStoreType extends StoreType,
+  >() => UseStore<OverrideStoreType>
+}
+
+/**
+ * Hook factory, which creates a `useStore` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useStore` hook bound to the specified context.
+ */
+export function createStoreHook<
+  StateType = unknown,
+  ActionType extends Action = Action,
+>(
+  // @ts-ignore
+  context?: Context<ReactReduxContextValue<
+    StateType,
+    ActionType
+  > | null> = ReactReduxContext,
+) {
+  const useReduxContext =
+    context === ReactReduxContext
+      ? useDefaultReduxContext
+      : // @ts-ignore
+        createReduxContextHook(context)
+  const useStore = () => {
+    const { store } = useReduxContext()
+    return store
+  }
+
+  Object.assign(useStore, {
+    withTypes: () => useStore,
+  })
+
+  return useStore as UseStore<Store<StateType, ActionType>>
+}
+
+/**
+ * A hook to access the redux store.
+ *
+ * @returns {any} the redux store
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useStore } from 'react-redux'
+ *
+ * export const ExampleComponent = () => {
+ *   const store = useStore()
+ *   return <div>{store.getState()}</div>
+ * }
+ */
+export const useStore = /*#__PURE__*/ createStoreHook()

package/src/index-rsc.ts

@@ -0,0 +1,34 @@
+import type * as normal from './index'
+import type * as rsc from './index-rsc'
+
+// checks to make sure we didn't forgot to replicate any exports
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const _check: typeof normal = {} as typeof rsc
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const _check2: typeof rsc = {} as typeof normal
+
+// -------------------------------------------------------------------------------------
+
+const throwNotSupportedError = ((
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...args: any[]
+): any => {
+  throw new Error(
+    'This function is not supported in React Server Components. Please only use this export in a Client Component.',
+  )
+}) as any
+
+export {
+  throwNotSupportedError as Provider,
+  throwNotSupportedError as batch,
+  throwNotSupportedError as connect,
+  throwNotSupportedError as createDispatchHook,
+  throwNotSupportedError as createSelectorHook,
+  throwNotSupportedError as createStoreHook,
+  throwNotSupportedError as useDispatch,
+  throwNotSupportedError as useSelector,
+  throwNotSupportedError as useStore,
+}
+export const ReactReduxContext = {} as any
+export { default as shallowEqual } from './utils/shallowEqual'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './exports'