source: node_modules/react-redux/src/hooks/useDispatch.ts@ a762898

Last change on this file since a762898 was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations

  • Property mode set to 100644
File size: 3.0 KB
RevLine 
[a762898]1import type { Context } from 'react'
2import type { Action, Dispatch, UnknownAction } from 'redux'
3
4import type { ReactReduxContextValue } from '../components/Context'
5import { ReactReduxContext } from '../components/Context'
6import { createStoreHook, useStore as useDefaultStore } from './useStore'
7
8/**
9 * Represents a custom hook that provides a dispatch function
10 * from the Redux store.
11 *
12 * @template DispatchType - The specific type of the dispatch function.
13 *
14 * @since 9.1.0
15 * @public
16 */
17export interface UseDispatch<
18 DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>,
19> {
20 /**
21 * Returns the dispatch function from the Redux store.
22 *
23 * @returns The dispatch function from the Redux store.
24 *
25 * @template AppDispatch - The specific type of the dispatch function.
26 */
27 <AppDispatch extends DispatchType = DispatchType>(): AppDispatch
28
29 /**
30 * Creates a "pre-typed" version of {@linkcode useDispatch useDispatch}
31 * where the type of the `dispatch` function is predefined.
32 *
33 * This allows you to set the `dispatch` type once, eliminating the need to
34 * specify it with every {@linkcode useDispatch useDispatch} call.
35 *
36 * @returns A pre-typed `useDispatch` with the dispatch type already defined.
37 *
38 * @example
39 * ```ts
40 * export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
41 * ```
42 *
43 * @template OverrideDispatchType - The specific type of the dispatch function.
44 *
45 * @since 9.1.0
46 */
47 withTypes: <
48 OverrideDispatchType extends DispatchType,
49 >() => UseDispatch<OverrideDispatchType>
50}
51
52/**
53 * Hook factory, which creates a `useDispatch` hook bound to a given context.
54 *
55 * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
56 * @returns {Function} A `useDispatch` hook bound to the specified context.
57 */
58export function createDispatchHook<
59 StateType = unknown,
60 ActionType extends Action = UnknownAction,
61>(
62 // @ts-ignore
63 context?: Context<ReactReduxContextValue<
64 StateType,
65 ActionType
66 > | null> = ReactReduxContext,
67) {
68 const useStore =
69 context === ReactReduxContext ? useDefaultStore : createStoreHook(context)
70
71 const useDispatch = () => {
72 const store = useStore()
73 return store.dispatch
74 }
75
76 Object.assign(useDispatch, {
77 withTypes: () => useDispatch,
78 })
79
80 return useDispatch as UseDispatch<Dispatch<ActionType>>
81}
82
83/**
84 * A hook to access the redux `dispatch` function.
85 *
86 * @returns {any|function} redux store's `dispatch` function
87 *
88 * @example
89 *
90 * import React, { useCallback } from 'react'
91 * import { useDispatch } from 'react-redux'
92 *
93 * export const CounterComponent = ({ value }) => {
94 * const dispatch = useDispatch()
95 * const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
96 * return (
97 * <div>
98 * <span>{value}</span>
99 * <button onClick={increaseCounter}>Increase counter</button>
100 * </div>
101 * )
102 * }
103 */
104export const useDispatch = /*#__PURE__*/ createDispatchHook()
Note: See TracBrowser for help on using the repository browser.