@depup/react-redux 9.3.0-depup.53

package/src/connect/invalidArgFactory.ts

@@ -0,0 +1,14 @@
+import type { Action, Dispatch } from 'redux'
+
+export function createInvalidArgFactory(arg: unknown, name: string) {
+  return (
+    dispatch: Dispatch<Action<string>>,
+    options: { readonly wrappedComponentName: string },
+  ) => {
+    throw new Error(
+      `Invalid value of type ${typeof arg} for ${name} argument when connecting component ${
+        options.wrappedComponentName
+      }.`,
+    )
+  }
+}

package/src/connect/mapDispatchToProps.ts

@@ -0,0 +1,25 @@
+import type { Action, Dispatch } from 'redux'
+import bindActionCreators from '../utils/bindActionCreators'
+import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps'
+import { createInvalidArgFactory } from './invalidArgFactory'
+import type { MapDispatchToPropsParam } from './selectorFactory'
+
+export function mapDispatchToPropsFactory<TDispatchProps, TOwnProps>(
+  mapDispatchToProps:
+    | MapDispatchToPropsParam<TDispatchProps, TOwnProps>
+    | undefined,
+) {
+  return mapDispatchToProps && typeof mapDispatchToProps === 'object'
+    ? wrapMapToPropsConstant((dispatch: Dispatch<Action<string>>) =>
+        // @ts-ignore
+        bindActionCreators(mapDispatchToProps, dispatch),
+      )
+    : !mapDispatchToProps
+      ? wrapMapToPropsConstant((dispatch: Dispatch<Action<string>>) => ({
+          dispatch,
+        }))
+      : typeof mapDispatchToProps === 'function'
+        ? // @ts-ignore
+          wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps')
+        : createInvalidArgFactory(mapDispatchToProps, 'mapDispatchToProps')
+}

package/src/connect/mapStateToProps.ts

@@ -0,0 +1,14 @@
+import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps'
+import { createInvalidArgFactory } from './invalidArgFactory'
+import type { MapStateToPropsParam } from './selectorFactory'
+
+export function mapStateToPropsFactory<TStateProps, TOwnProps, State>(
+  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+) {
+  return !mapStateToProps
+    ? wrapMapToPropsConstant(() => ({}))
+    : typeof mapStateToProps === 'function'
+      ? // @ts-ignore
+        wrapMapToPropsFunc(mapStateToProps, 'mapStateToProps')
+      : createInvalidArgFactory(mapStateToProps, 'mapStateToProps')
+}

package/src/connect/mergeProps.ts

@@ -0,0 +1,78 @@
+import type { Action, Dispatch } from 'redux'
+import verifyPlainObject from '../utils/verifyPlainObject'
+import { createInvalidArgFactory } from './invalidArgFactory'
+import type { MergeProps } from './selectorFactory'
+import type { EqualityFn } from '../types'
+
+function defaultMergeProps<
+  TStateProps,
+  TDispatchProps,
+  TOwnProps,
+  TMergedProps,
+>(
+  stateProps: TStateProps,
+  dispatchProps: TDispatchProps,
+  ownProps: TOwnProps,
+): TMergedProps {
+  // @ts-ignore
+  return { ...ownProps, ...stateProps, ...dispatchProps }
+}
+
+function wrapMergePropsFunc<
+  TStateProps,
+  TDispatchProps,
+  TOwnProps,
+  TMergedProps,
+>(
+  mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
+): (
+  dispatch: Dispatch<Action<string>>,
+  options: {
+    readonly displayName: string
+    readonly areMergedPropsEqual: EqualityFn<TMergedProps>
+  },
+) => MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps> {
+  return function initMergePropsProxy(
+    dispatch,
+    { displayName, areMergedPropsEqual },
+  ) {
+    let hasRunOnce = false
+    let mergedProps: TMergedProps
+
+    return function mergePropsProxy(
+      stateProps: TStateProps,
+      dispatchProps: TDispatchProps,
+      ownProps: TOwnProps,
+    ) {
+      const nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps)
+
+      if (hasRunOnce) {
+        if (!areMergedPropsEqual(nextMergedProps, mergedProps))
+          mergedProps = nextMergedProps
+      } else {
+        hasRunOnce = true
+        mergedProps = nextMergedProps
+
+        if (process.env.NODE_ENV !== 'production')
+          verifyPlainObject(mergedProps, displayName, 'mergeProps')
+      }
+
+      return mergedProps
+    }
+  }
+}
+
+export function mergePropsFactory<
+  TStateProps,
+  TDispatchProps,
+  TOwnProps,
+  TMergedProps,
+>(
+  mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
+) {
+  return !mergeProps
+    ? () => defaultMergeProps
+    : typeof mergeProps === 'function'
+      ? wrapMergePropsFunc(mergeProps)
+      : createInvalidArgFactory(mergeProps, 'mergeProps')
+}

package/src/connect/selectorFactory.ts

@@ -0,0 +1,242 @@
+import type { Dispatch, Action } from 'redux'
+import type { ComponentType } from 'react'
+import verifySubselectors from './verifySubselectors'
+import type { EqualityFn, ExtendedEqualityFn } from '../types'
+
+export type SelectorFactory<S, TProps, TOwnProps, TFactoryOptions> = (
+  dispatch: Dispatch<Action<string>>,
+  factoryOptions: TFactoryOptions,
+) => Selector<S, TProps, TOwnProps>
+
+export type Selector<S, TProps, TOwnProps = null> = TOwnProps extends
+  | null
+  | undefined
+  ? (state: S) => TProps
+  : (state: S, ownProps: TOwnProps) => TProps
+
+export type MapStateToProps<TStateProps, TOwnProps, State> = (
+  state: State,
+  ownProps: TOwnProps,
+) => TStateProps
+
+export type MapStateToPropsFactory<TStateProps, TOwnProps, State> = (
+  initialState: State,
+  ownProps: TOwnProps,
+) => MapStateToProps<TStateProps, TOwnProps, State>
+
+export type MapStateToPropsParam<TStateProps, TOwnProps, State> =
+  | MapStateToPropsFactory<TStateProps, TOwnProps, State>
+  | MapStateToProps<TStateProps, TOwnProps, State>
+  | null
+  | undefined
+
+export type MapDispatchToPropsFunction<TDispatchProps, TOwnProps> = (
+  dispatch: Dispatch<Action<string>>,
+  ownProps: TOwnProps,
+) => TDispatchProps
+
+export type MapDispatchToProps<TDispatchProps, TOwnProps> =
+  | MapDispatchToPropsFunction<TDispatchProps, TOwnProps>
+  | TDispatchProps
+
+export type MapDispatchToPropsFactory<TDispatchProps, TOwnProps> = (
+  dispatch: Dispatch<Action<string>>,
+  ownProps: TOwnProps,
+) => MapDispatchToPropsFunction<TDispatchProps, TOwnProps>
+
+export type MapDispatchToPropsParam<TDispatchProps, TOwnProps> =
+  | MapDispatchToPropsFactory<TDispatchProps, TOwnProps>
+  | MapDispatchToProps<TDispatchProps, TOwnProps>
+
+export type MapDispatchToPropsNonObject<TDispatchProps, TOwnProps> =
+  | MapDispatchToPropsFactory<TDispatchProps, TOwnProps>
+  | MapDispatchToPropsFunction<TDispatchProps, TOwnProps>
+
+export type MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps> = (
+  stateProps: TStateProps,
+  dispatchProps: TDispatchProps,
+  ownProps: TOwnProps,
+) => TMergedProps
+
+interface PureSelectorFactoryComparisonOptions<TStateProps, TOwnProps, State> {
+  readonly areStatesEqual: ExtendedEqualityFn<State, TOwnProps>
+  readonly areStatePropsEqual: EqualityFn<TStateProps>
+  readonly areOwnPropsEqual: EqualityFn<TOwnProps>
+}
+
+function pureFinalPropsSelectorFactory<
+  TStateProps,
+  TOwnProps,
+  TDispatchProps,
+  TMergedProps,
+  State,
+>(
+  mapStateToProps: WrappedMapStateToProps<TStateProps, TOwnProps, State>,
+  mapDispatchToProps: WrappedMapDispatchToProps<TDispatchProps, TOwnProps>,
+  mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
+  dispatch: Dispatch<Action<string>>,
+  {
+    areStatesEqual,
+    areOwnPropsEqual,
+    areStatePropsEqual,
+  }: PureSelectorFactoryComparisonOptions<TStateProps, TOwnProps, State>,
+) {
+  let hasRunAtLeastOnce = false
+  let state: State
+  let ownProps: TOwnProps
+  let stateProps: TStateProps
+  let dispatchProps: TDispatchProps
+  let mergedProps: TMergedProps
+
+  function handleFirstCall(firstState: State, firstOwnProps: TOwnProps) {
+    state = firstState
+    ownProps = firstOwnProps
+    stateProps = mapStateToProps(state, ownProps)
+    dispatchProps = mapDispatchToProps(dispatch, ownProps)
+    mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
+    hasRunAtLeastOnce = true
+    return mergedProps
+  }
+
+  function handleNewPropsAndNewState() {
+    stateProps = mapStateToProps(state, ownProps)
+
+    if (mapDispatchToProps.dependsOnOwnProps)
+      dispatchProps = mapDispatchToProps(dispatch, ownProps)
+
+    mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
+    return mergedProps
+  }
+
+  function handleNewProps() {
+    if (mapStateToProps.dependsOnOwnProps)
+      stateProps = mapStateToProps(state, ownProps)
+
+    if (mapDispatchToProps.dependsOnOwnProps)
+      dispatchProps = mapDispatchToProps(dispatch, ownProps)
+
+    mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
+    return mergedProps
+  }
+
+  function handleNewState() {
+    const nextStateProps = mapStateToProps(state, ownProps)
+    const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps)
+    stateProps = nextStateProps
+
+    if (statePropsChanged)
+      mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
+
+    return mergedProps
+  }
+
+  function handleSubsequentCalls(nextState: State, nextOwnProps: TOwnProps) {
+    const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps)
+    const stateChanged = !areStatesEqual(
+      nextState,
+      state,
+      nextOwnProps,
+      ownProps,
+    )
+    state = nextState
+    ownProps = nextOwnProps
+
+    if (propsChanged && stateChanged) return handleNewPropsAndNewState()
+    if (propsChanged) return handleNewProps()
+    if (stateChanged) return handleNewState()
+    return mergedProps
+  }
+
+  return function pureFinalPropsSelector(
+    nextState: State,
+    nextOwnProps: TOwnProps,
+  ) {
+    return hasRunAtLeastOnce
+      ? handleSubsequentCalls(nextState, nextOwnProps)
+      : handleFirstCall(nextState, nextOwnProps)
+  }
+}
+
+interface WrappedMapStateToProps<TStateProps, TOwnProps, State> {
+  (state: State, ownProps: TOwnProps): TStateProps
+  readonly dependsOnOwnProps: boolean
+}
+
+interface WrappedMapDispatchToProps<TDispatchProps, TOwnProps> {
+  (dispatch: Dispatch<Action<string>>, ownProps: TOwnProps): TDispatchProps
+  readonly dependsOnOwnProps: boolean
+}
+
+export interface InitOptions<TStateProps, TOwnProps, TMergedProps, State>
+  extends PureSelectorFactoryComparisonOptions<TStateProps, TOwnProps, State> {
+  readonly shouldHandleStateChanges: boolean
+  readonly displayName: string
+  readonly wrappedComponentName: string
+  readonly WrappedComponent: ComponentType<TOwnProps>
+  readonly areMergedPropsEqual: EqualityFn<TMergedProps>
+}
+
+export interface SelectorFactoryOptions<
+  TStateProps,
+  TOwnProps,
+  TDispatchProps,
+  TMergedProps,
+  State,
+> extends InitOptions<TStateProps, TOwnProps, TMergedProps, State> {
+  readonly initMapStateToProps: (
+    dispatch: Dispatch<Action<string>>,
+    options: InitOptions<TStateProps, TOwnProps, TMergedProps, State>,
+  ) => WrappedMapStateToProps<TStateProps, TOwnProps, State>
+  readonly initMapDispatchToProps: (
+    dispatch: Dispatch<Action<string>>,
+    options: InitOptions<TStateProps, TOwnProps, TMergedProps, State>,
+  ) => WrappedMapDispatchToProps<TDispatchProps, TOwnProps>
+  readonly initMergeProps: (
+    dispatch: Dispatch<Action<string>>,
+    options: InitOptions<TStateProps, TOwnProps, TMergedProps, State>,
+  ) => MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>
+}
+
+// TODO: Add more comments
+
+// The selector returned by selectorFactory will memoize its results,
+// allowing connect's shouldComponentUpdate to return false if final
+// props have not changed.
+
+export default function finalPropsSelectorFactory<
+  TStateProps,
+  TOwnProps,
+  TDispatchProps,
+  TMergedProps,
+  State,
+>(
+  dispatch: Dispatch<Action<string>>,
+  {
+    initMapStateToProps,
+    initMapDispatchToProps,
+    initMergeProps,
+    ...options
+  }: SelectorFactoryOptions<
+    TStateProps,
+    TOwnProps,
+    TDispatchProps,
+    TMergedProps,
+    State
+  >,
+) {
+  const mapStateToProps = initMapStateToProps(dispatch, options)
+  const mapDispatchToProps = initMapDispatchToProps(dispatch, options)
+  const mergeProps = initMergeProps(dispatch, options)
+
+  if (process.env.NODE_ENV !== 'production') {
+    verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps)
+  }
+
+  return pureFinalPropsSelectorFactory<
+    TStateProps,
+    TOwnProps,
+    TDispatchProps,
+    TMergedProps,
+    State
+  >(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, options)
+}

package/src/connect/verifySubselectors.ts

@@ -0,0 +1,26 @@
+import warning from '../utils/warning'
+
+function verify(selector: unknown, methodName: string): void {
+  if (!selector) {
+    throw new Error(`Unexpected value for ${methodName} in connect.`)
+  } else if (
+    methodName === 'mapStateToProps' ||
+    methodName === 'mapDispatchToProps'
+  ) {
+    if (!Object.prototype.hasOwnProperty.call(selector, 'dependsOnOwnProps')) {
+      warning(
+        `The selector for ${methodName} of connect did not specify a value for dependsOnOwnProps.`,
+      )
+    }
+  }
+}
+
+export default function verifySubselectors(
+  mapStateToProps: unknown,
+  mapDispatchToProps: unknown,
+  mergeProps: unknown,
+): void {
+  verify(mapStateToProps, 'mapStateToProps')
+  verify(mapDispatchToProps, 'mapDispatchToProps')
+  verify(mergeProps, 'mergeProps')
+}

package/src/connect/wrapMapToProps.ts

@@ -0,0 +1,110 @@
+import type { ActionCreatorsMapObject, Dispatch, ActionCreator } from 'redux'
+
+import type { FixTypeLater } from '../types'
+import verifyPlainObject from '../utils/verifyPlainObject'
+
+type AnyState = { [key: string]: any }
+type StateOrDispatch<S extends AnyState = AnyState> = S | Dispatch
+
+type AnyProps = { [key: string]: any }
+
+export type MapToProps<P extends AnyProps = AnyProps> = {
+  // eslint-disable-next-line no-unused-vars
+  (stateOrDispatch: StateOrDispatch, ownProps?: P): FixTypeLater
+  dependsOnOwnProps?: boolean
+}
+
+export function wrapMapToPropsConstant(
+  // * Note:
+  //  It seems that the dispatch argument
+  //  could be a dispatch function in some cases (ex: whenMapDispatchToPropsIsMissing)
+  //  and a state object in some others (ex: whenMapStateToPropsIsMissing)
+  // eslint-disable-next-line no-unused-vars
+  getConstant: (dispatch: Dispatch) =>
+    | {
+        dispatch?: Dispatch
+        dependsOnOwnProps?: boolean
+      }
+    | ActionCreatorsMapObject
+    | ActionCreator<any>,
+) {
+  return function initConstantSelector(dispatch: Dispatch) {
+    const constant = getConstant(dispatch)
+
+    function constantSelector() {
+      return constant
+    }
+    constantSelector.dependsOnOwnProps = false
+    return constantSelector
+  }
+}
+
+// dependsOnOwnProps is used by createMapToPropsProxy to determine whether to pass props as args
+// to the mapToProps function being wrapped. It is also used by makePurePropsSelector to determine
+// whether mapToProps needs to be invoked when props have changed.
+//
+// A length of one signals that mapToProps does not depend on props from the parent component.
+// A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
+// therefore not reporting its length accurately..
+// TODO Can this get pulled out so that we can subscribe directly to the store if we don't need ownProps?
+function getDependsOnOwnProps(mapToProps: MapToProps) {
+  return mapToProps.dependsOnOwnProps
+    ? Boolean(mapToProps.dependsOnOwnProps)
+    : mapToProps.length !== 1
+}
+
+// Used by whenMapStateToPropsIsFunction and whenMapDispatchToPropsIsFunction,
+// this function wraps mapToProps in a proxy function which does several things:
+//
+//  * Detects whether the mapToProps function being called depends on props, which
+//    is used by selectorFactory to decide if it should reinvoke on props changes.
+//
+//  * On first call, handles mapToProps if returns another function, and treats that
+//    new function as the true mapToProps for subsequent calls.
+//
+//  * On first call, verifies the first result is a plain object, in order to warn
+//    the developer that their mapToProps function is not returning a valid result.
+//
+export function wrapMapToPropsFunc<P extends AnyProps = AnyProps>(
+  mapToProps: MapToProps,
+  methodName: string,
+) {
+  return function initProxySelector(
+    dispatch: Dispatch,
+    { displayName }: { displayName: string },
+  ) {
+    const proxy = function mapToPropsProxy(
+      stateOrDispatch: StateOrDispatch,
+      ownProps?: P,
+    ): MapToProps {
+      return proxy.dependsOnOwnProps
+        ? proxy.mapToProps(stateOrDispatch, ownProps)
+        : proxy.mapToProps(stateOrDispatch, undefined)
+    }
+
+    // allow detectFactoryAndVerify to get ownProps
+    proxy.dependsOnOwnProps = true
+
+    proxy.mapToProps = function detectFactoryAndVerify(
+      stateOrDispatch: StateOrDispatch,
+      ownProps?: P,
+    ): MapToProps {
+      proxy.mapToProps = mapToProps
+      proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps)
+      let props = proxy(stateOrDispatch, ownProps)
+
+      if (typeof props === 'function') {
+        proxy.mapToProps = props
+        proxy.dependsOnOwnProps = getDependsOnOwnProps(props)
+        props = proxy(stateOrDispatch, ownProps)
+      }
+
+      if (process.env.NODE_ENV !== 'production')
+        verifyPlainObject(props, displayName, methodName)
+
+      return props
+    }
+
+    return proxy
+  }
+}

package/src/exports.ts

@@ -0,0 +1,51 @@
+import { connect, legacy_connect } from './components/connect'
+export type {
+  Connect,
+  ConnectProps,
+  ConnectedProps,
+} from './components/connect'
+
+import shallowEqual from './utils/shallowEqual'
+
+import Provider from './components/Provider'
+import { defaultNoopBatch } from './utils/batch'
+
+export { ReactReduxContext } from './components/Context'
+export type { ReactReduxContextValue } from './components/Context'
+
+export type { ProviderProps } from './components/Provider'
+
+export type {
+  MapDispatchToProps,
+  MapDispatchToPropsFactory,
+  MapDispatchToPropsFunction,
+  MapDispatchToPropsNonObject,
+  MapDispatchToPropsParam,
+  MapStateToProps,
+  MapStateToPropsFactory,
+  MapStateToPropsParam,
+  MergeProps,
+  Selector,
+  SelectorFactory,
+} from './connect/selectorFactory'
+
+export { createDispatchHook, useDispatch } from './hooks/useDispatch'
+export type { UseDispatch } from './hooks/useDispatch'
+
+export { createSelectorHook, useSelector } from './hooks/useSelector'
+export type { UseSelector } from './hooks/useSelector'
+
+export { createStoreHook, useStore } from './hooks/useStore'
+export type { UseStore } from './hooks/useStore'
+
+export type { Subscription } from './utils/Subscription'
+
+export * from './types'
+
+/**
+ * @deprecated As of React 18, batching is enabled by default for ReactDOM and React Native.
+ * This is now a no-op that immediately runs the callback.
+ */
+const batch = defaultNoopBatch
+
+export { Provider, batch, connect, legacy_connect, shallowEqual }

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()