index.d.ts 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. // Type definitions for react-redux 7.1
  2. // Project: https://github.com/reduxjs/react-redux
  3. // Definitions by: Qubo <https://github.com/tkqubo>,
  4. // Kenzie Togami <https://github.com/kenzierocks>,
  5. // Curits Layne <https://github.com/clayne11>
  6. // Frank Tan <https://github.com/tansongyang>
  7. // Nicholas Boll <https://github.com/nicholasboll>
  8. // Dibyo Majumdar <https://github.com/mdibyo>
  9. // Thomas Charlat <https://github.com/kallikrein>
  10. // Valentin Descamps <https://github.com/val1984>
  11. // Johann Rakotoharisoa <https://github.com/jrakotoharisoa>
  12. // Anatoli Papirovski <https://github.com/apapirovski>
  13. // Boris Sergeyev <https://github.com/surgeboris>
  14. // Søren Bruus Frank <https://github.com/soerenbf>
  15. // Jonathan Ziller <https://github.com/mrwolfz>
  16. // Dylan Vann <https://github.com/dylanvann>
  17. // Yuki Ito <https://github.com/Lazyuki>
  18. // Kazuma Ebina <https://github.com/kazuma1989>
  19. // Michael Lebedev <https://github.com/megazazik>
  20. // jun-sheaf <https://github.com/jun-sheaf>
  21. // Lenz Weber <https://github.com/phryneas>
  22. // Mark Erikson <https://github.com/markerikson>
  23. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  24. // TypeScript Version: 3.0
  25. import {
  26. ClassAttributes,
  27. Component,
  28. ComponentClass,
  29. ComponentType,
  30. FunctionComponent,
  31. Context,
  32. NamedExoticComponent,
  33. ReactNode
  34. } from 'react';
  35. import {
  36. Action,
  37. ActionCreator,
  38. AnyAction,
  39. Dispatch,
  40. Store
  41. } from 'redux';
  42. import hoistNonReactStatics = require('hoist-non-react-statics');
  43. /**
  44. * This interface can be augmented by users to add default types for the root state when
  45. * using `react-redux`.
  46. * Use module augmentation to append your own type definition in a your_custom_type.d.ts file.
  47. * https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
  48. */
  49. // tslint:disable-next-line:no-empty-interface
  50. export interface DefaultRootState {}
  51. export type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
  52. export type RootStateOrAny = AnyIfEmpty<DefaultRootState>;
  53. // Omit taken from https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html
  54. export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
  55. export type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never;
  56. export interface DispatchProp<A extends Action = AnyAction> {
  57. dispatch: Dispatch<A>;
  58. }
  59. export type AdvancedComponentDecorator<TProps, TOwnProps> =
  60. (component: ComponentType<TProps>) => NamedExoticComponent<TOwnProps>;
  61. /**
  62. * A property P will be present if:
  63. * - it is present in DecorationTargetProps
  64. *
  65. * Its value will be dependent on the following conditions
  66. * - if property P is present in InjectedProps and its definition extends the definition
  67. * in DecorationTargetProps, then its definition will be that of DecorationTargetProps[P]
  68. * - if property P is not present in InjectedProps then its definition will be that of
  69. * DecorationTargetProps[P]
  70. * - if property P is present in InjectedProps but does not extend the
  71. * DecorationTargetProps[P] definition, its definition will be that of InjectedProps[P]
  72. */
  73. export type Matching<InjectedProps, DecorationTargetProps> = {
  74. [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
  75. ? InjectedProps[P] extends DecorationTargetProps[P]
  76. ? DecorationTargetProps[P]
  77. : InjectedProps[P]
  78. : DecorationTargetProps[P];
  79. };
  80. /**
  81. * a property P will be present if :
  82. * - it is present in both DecorationTargetProps and InjectedProps
  83. * - InjectedProps[P] can satisfy DecorationTargetProps[P]
  84. * ie: decorated component can accept more types than decorator is injecting
  85. *
  86. * For decoration, inject props or ownProps are all optionally
  87. * required by the decorated (right hand side) component.
  88. * But any property required by the decorated component must be satisfied by the injected property.
  89. */
  90. export type Shared<
  91. InjectedProps,
  92. DecorationTargetProps
  93. > = {
  94. [P in Extract<keyof InjectedProps, keyof DecorationTargetProps>]?: InjectedProps[P] extends DecorationTargetProps[P] ? DecorationTargetProps[P] : never;
  95. };
  96. // Infers prop type from component C
  97. export type GetProps<C> = C extends ComponentType<infer P>
  98. ? C extends ComponentClass<P> ? ClassAttributes<InstanceType<C>> & P : P
  99. : never;
  100. // Applies LibraryManagedAttributes (proper handling of defaultProps
  101. // and propTypes).
  102. export type GetLibraryManagedProps<C> = JSX.LibraryManagedAttributes<C, GetProps<C>>;
  103. // Defines WrappedComponent and derives non-react statics.
  104. export type ConnectedComponent<
  105. C extends ComponentType<any>,
  106. P
  107. > = NamedExoticComponent<P> & hoistNonReactStatics.NonReactStatics<C> & {
  108. WrappedComponent: C;
  109. };
  110. // Injects props and removes them from the prop requirements.
  111. // Will not pass through the injected props if they are passed in during
  112. // render. Also adds new prop requirements from TNeedsProps.
  113. // Uses distributive omit to preserve discriminated unions part of original prop type
  114. export type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> =
  115. <C extends ComponentType<Matching<TInjectedProps, GetProps<C>>>>(
  116. component: C
  117. ) => ConnectedComponent<C, DistributiveOmit<GetLibraryManagedProps<C>, keyof Shared<TInjectedProps, GetLibraryManagedProps<C>>> & TNeedsProps>;
  118. // Injects props and removes them from the prop requirements.
  119. // Will not pass through the injected props if they are passed in during
  120. // render.
  121. export type InferableComponentEnhancer<TInjectedProps> =
  122. InferableComponentEnhancerWithProps<TInjectedProps, {}>;
  123. export type InferThunkActionCreatorType<TActionCreator extends (...args: any[]) => any> =
  124. TActionCreator extends (...args: infer TParams) => (...args: any[]) => infer TReturn
  125. ? (...args: TParams) => TReturn
  126. : TActionCreator;
  127. export type HandleThunkActionCreator<TActionCreator> =
  128. TActionCreator extends (...args: any[]) => any
  129. ? InferThunkActionCreatorType<TActionCreator>
  130. : TActionCreator;
  131. // redux-thunk middleware returns thunk's return value from dispatch call
  132. // https://github.com/reduxjs/redux-thunk#composition
  133. export type ResolveThunks<TDispatchProps> =
  134. TDispatchProps extends { [key: string]: any }
  135. ? {
  136. [C in keyof TDispatchProps]: HandleThunkActionCreator<TDispatchProps[C]>
  137. }
  138. : TDispatchProps;
  139. // the conditional type is to support TypeScript 3.0, which does not support mapping over tuples and arrays;
  140. // once the typings are updated to at least TypeScript 3.1, a simple mapped type can replace this mess
  141. export type ResolveArrayThunks<TDispatchProps extends ReadonlyArray<any>> =
  142. TDispatchProps extends [infer A1, infer A2, infer A3, infer A4, infer A5, infer A6, infer A7, infer A8, infer A9]
  143. ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>, HandleThunkActionCreator<A4>,
  144. HandleThunkActionCreator<A5>, HandleThunkActionCreator<A6>, HandleThunkActionCreator<A7>, HandleThunkActionCreator<A8>, HandleThunkActionCreator<A9>]
  145. : TDispatchProps extends [infer A1, infer A2, infer A3, infer A4, infer A5, infer A6, infer A7, infer A8]
  146. ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>, HandleThunkActionCreator<A4>,
  147. HandleThunkActionCreator<A5>, HandleThunkActionCreator<A6>, HandleThunkActionCreator<A7>, HandleThunkActionCreator<A8>]
  148. : TDispatchProps extends [infer A1, infer A2, infer A3, infer A4, infer A5, infer A6, infer A7]
  149. ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>, HandleThunkActionCreator<A4>,
  150. HandleThunkActionCreator<A5>, HandleThunkActionCreator<A6>, HandleThunkActionCreator<A7>]
  151. : TDispatchProps extends [infer A1, infer A2, infer A3, infer A4, infer A5, infer A6]
  152. ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>, HandleThunkActionCreator<A4>, HandleThunkActionCreator<A5>, HandleThunkActionCreator<A6>]
  153. : TDispatchProps extends [infer A1, infer A2, infer A3, infer A4, infer A5]
  154. ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>, HandleThunkActionCreator<A4>, HandleThunkActionCreator<A5>]
  155. : TDispatchProps extends [infer A1, infer A2, infer A3, infer A4] ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>, HandleThunkActionCreator<A4>]
  156. : TDispatchProps extends [infer A1, infer A2, infer A3] ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>, HandleThunkActionCreator<A3>]
  157. : TDispatchProps extends [infer A1, infer A2] ? [HandleThunkActionCreator<A1>, HandleThunkActionCreator<A2>]
  158. : TDispatchProps extends [infer A1] ? [HandleThunkActionCreator<A1>]
  159. : TDispatchProps extends Array<infer A> ? Array<HandleThunkActionCreator<A>>
  160. : TDispatchProps extends ReadonlyArray<infer A> ? ReadonlyArray<HandleThunkActionCreator<A>>
  161. : never
  162. ;
  163. /**
  164. * Connects a React component to a Redux store.
  165. *
  166. * - Without arguments, just wraps the component, without changing the behavior / props
  167. *
  168. * - If 2 params are passed (3rd param, mergeProps, is skipped), default behavior
  169. * is to override ownProps (as stated in the docs), so what remains is everything that's
  170. * not a state or dispatch prop
  171. *
  172. * - When 3rd param is passed, we don't know if ownProps propagate and whether they
  173. * should be valid component props, because it depends on mergeProps implementation.
  174. * As such, it is the user's responsibility to extend ownProps interface from state or
  175. * dispatch props or both when applicable
  176. *
  177. * @param mapStateToProps
  178. * @param mapDispatchToProps
  179. * @param mergeProps
  180. * @param options
  181. */
  182. export interface Connect<DefaultState = DefaultRootState> {
  183. // tslint:disable:no-unnecessary-generics
  184. (): InferableComponentEnhancer<DispatchProp>;
  185. <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = DefaultState>(
  186. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>
  187. ): InferableComponentEnhancerWithProps<TStateProps & DispatchProp, TOwnProps>;
  188. <no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
  189. mapStateToProps: null | undefined,
  190. mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
  191. ): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;
  192. <no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
  193. mapStateToProps: null | undefined,
  194. mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  195. ): InferableComponentEnhancerWithProps<
  196. ResolveThunks<TDispatchProps>,
  197. TOwnProps
  198. >;
  199. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = DefaultState>(
  200. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  201. mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
  202. ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;
  203. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = DefaultState>(
  204. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  205. mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  206. ): InferableComponentEnhancerWithProps<
  207. TStateProps & ResolveThunks<TDispatchProps>,
  208. TOwnProps
  209. >;
  210. <no_state = {}, no_dispatch = {}, TOwnProps = {}, TMergedProps = {}>(
  211. mapStateToProps: null | undefined,
  212. mapDispatchToProps: null | undefined,
  213. mergeProps: MergeProps<undefined, undefined, TOwnProps, TMergedProps>,
  214. ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
  215. <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, TMergedProps = {}, State = DefaultState>(
  216. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  217. mapDispatchToProps: null | undefined,
  218. mergeProps: MergeProps<TStateProps, undefined, TOwnProps, TMergedProps>,
  219. ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
  220. <no_state = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
  221. mapStateToProps: null | undefined,
  222. mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  223. mergeProps: MergeProps<undefined, TDispatchProps, TOwnProps, TMergedProps>,
  224. ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
  225. <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = DefaultState>(
  226. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  227. mapDispatchToProps: null | undefined,
  228. mergeProps: null | undefined,
  229. options: Options<State, TStateProps, TOwnProps>
  230. ): InferableComponentEnhancerWithProps<DispatchProp & TStateProps, TOwnProps>;
  231. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
  232. mapStateToProps: null | undefined,
  233. mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>,
  234. mergeProps: null | undefined,
  235. options: Options<{}, TStateProps, TOwnProps>
  236. ): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;
  237. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
  238. mapStateToProps: null | undefined,
  239. mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  240. mergeProps: null | undefined,
  241. options: Options<{}, TStateProps, TOwnProps>
  242. ): InferableComponentEnhancerWithProps<
  243. ResolveThunks<TDispatchProps>,
  244. TOwnProps
  245. >;
  246. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = DefaultState>(
  247. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  248. mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>,
  249. mergeProps: null | undefined,
  250. options: Options<State, TStateProps, TOwnProps>
  251. ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;
  252. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = DefaultState>(
  253. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  254. mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  255. mergeProps: null | undefined,
  256. options: Options<State, TStateProps, TOwnProps>
  257. ): InferableComponentEnhancerWithProps<
  258. TStateProps & ResolveThunks<TDispatchProps>,
  259. TOwnProps
  260. >;
  261. <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}, State = DefaultState>(
  262. mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  263. mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  264. mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
  265. options?: Options<State, TStateProps, TOwnProps, TMergedProps>
  266. ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
  267. // tslint:enable:no-unnecessary-generics
  268. }
  269. /**
  270. * Infers the type of props that a connector will inject into a component.
  271. */
  272. export type ConnectedProps<TConnector> =
  273. TConnector extends InferableComponentEnhancerWithProps<infer TInjectedProps, any>
  274. ? unknown extends TInjectedProps
  275. ? TConnector extends InferableComponentEnhancer<infer TInjectedProps>
  276. ? TInjectedProps
  277. : never
  278. : TInjectedProps
  279. : never;
  280. /**
  281. * The connect function. See {@type Connect} for details.
  282. */
  283. export const connect: Connect;
  284. export type MapStateToProps<TStateProps, TOwnProps, State = DefaultRootState> =
  285. (state: State, ownProps: TOwnProps) => TStateProps;
  286. export type MapStateToPropsFactory<TStateProps, TOwnProps, State = DefaultRootState> =
  287. (initialState: State, ownProps: TOwnProps) => MapStateToProps<TStateProps, TOwnProps, State>;
  288. export type MapStateToPropsParam<TStateProps, TOwnProps, State = DefaultRootState> =
  289. MapStateToPropsFactory<TStateProps, TOwnProps, State> | MapStateToProps<TStateProps, TOwnProps, State> | null | undefined;
  290. export type MapDispatchToPropsFunction<TDispatchProps, TOwnProps> =
  291. (dispatch: Dispatch<Action>, ownProps: TOwnProps) => TDispatchProps;
  292. export type MapDispatchToProps<TDispatchProps, TOwnProps> =
  293. MapDispatchToPropsFunction<TDispatchProps, TOwnProps> | TDispatchProps;
  294. export type MapDispatchToPropsFactory<TDispatchProps, TOwnProps> =
  295. (dispatch: Dispatch<Action>, ownProps: TOwnProps) => MapDispatchToPropsFunction<TDispatchProps, TOwnProps>;
  296. export type MapDispatchToPropsParam<TDispatchProps, TOwnProps> = MapDispatchToPropsFactory<TDispatchProps, TOwnProps> | MapDispatchToProps<TDispatchProps, TOwnProps>;
  297. export type MapDispatchToPropsNonObject<TDispatchProps, TOwnProps> = MapDispatchToPropsFactory<TDispatchProps, TOwnProps> | MapDispatchToPropsFunction<TDispatchProps, TOwnProps>;
  298. export type MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps> =
  299. (stateProps: TStateProps, dispatchProps: TDispatchProps, ownProps: TOwnProps) => TMergedProps;
  300. export interface Options<State = DefaultRootState, TStateProps = {}, TOwnProps = {}, TMergedProps = {}> extends ConnectOptions {
  301. /**
  302. * If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
  303. * preventing unnecessary updates, assuming that the component is a “pure” component
  304. * and does not rely on any input or state other than its props and the selected Redux store’s state.
  305. * Defaults to true.
  306. * @default true
  307. */
  308. pure?: boolean | undefined;
  309. /**
  310. * When pure, compares incoming store state to its previous value.
  311. * @default strictEqual
  312. */
  313. areStatesEqual?: ((nextState: State, prevState: State) => boolean) | undefined;
  314. /**
  315. * When pure, compares incoming props to its previous value.
  316. * @default shallowEqual
  317. */
  318. areOwnPropsEqual?: ((nextOwnProps: TOwnProps, prevOwnProps: TOwnProps) => boolean) | undefined;
  319. /**
  320. * When pure, compares the result of mapStateToProps to its previous value.
  321. * @default shallowEqual
  322. */
  323. areStatePropsEqual?: ((nextStateProps: TStateProps, prevStateProps: TStateProps) => boolean) | undefined;
  324. /**
  325. * When pure, compares the result of mergeProps to its previous value.
  326. * @default shallowEqual
  327. */
  328. areMergedPropsEqual?: ((nextMergedProps: TMergedProps, prevMergedProps: TMergedProps) => boolean) | undefined;
  329. /**
  330. * If true, use React's forwardRef to expose a ref of the wrapped component
  331. *
  332. * @default false
  333. */
  334. forwardRef?: boolean | undefined;
  335. }
  336. /**
  337. * Connects a React component to a Redux store. It is the base for {@link connect} but is less opinionated about
  338. * how to combine <code>state</code>, <code>props</code>, and <code>dispatch</code> into your final props. It makes no
  339. * assumptions about defaults or memoization of results, leaving those responsibilities to the caller.It does not
  340. * modify the component class passed to it; instead, it returns a new, connected component for you to use.
  341. *
  342. * @param selectorFactory The selector factory. See SelectorFactory type for details.
  343. * @param connectOptions If specified, further customizes the behavior of the connector. Additionally, any extra
  344. * options will be passed through to your <code>selectorFactory</code> in the <code>factoryOptions</code> argument.
  345. */
  346. export function connectAdvanced<S, TProps, TOwnProps, TFactoryOptions = {}>(
  347. // tslint:disable-next-line no-unnecessary-generics
  348. selectorFactory: SelectorFactory<S, TProps, TOwnProps, TFactoryOptions>,
  349. connectOptions?: ConnectOptions & TFactoryOptions
  350. ): AdvancedComponentDecorator<TProps, TOwnProps>;
  351. /**
  352. * Initializes a selector function (during each instance's constructor). That selector function is called any time the
  353. * connector component needs to compute new props, as a result of a store state change or receiving new props. The
  354. * result of <code>selector</code> is expected to be a plain object, which is passed as the props to the wrapped
  355. * component. If a consecutive call to <code>selector</code> returns the same object (<code>===</code>) as its previous
  356. * call, the component will not be re-rendered. It's the responsibility of <code>selector</code> to return that
  357. * previous object when appropriate.
  358. */
  359. export type SelectorFactory<S, TProps, TOwnProps, TFactoryOptions> =
  360. (dispatch: Dispatch<Action>, factoryOptions: TFactoryOptions) => Selector<S, TProps, TOwnProps>;
  361. export type Selector<S, TProps, TOwnProps = null> = TOwnProps extends null | undefined
  362. ? (state: S) => TProps
  363. : (state: S, ownProps: TOwnProps) => TProps;
  364. export interface ConnectOptions {
  365. /**
  366. * Computes the connector component's displayName property relative to that of the wrapped component. Usually
  367. * overridden by wrapper functions.
  368. *
  369. * @default name => 'ConnectAdvanced('+name+')'
  370. * @param componentName
  371. */
  372. getDisplayName?: ((componentName: string) => string) | undefined;
  373. /**
  374. * Shown in error messages. Usually overridden by wrapper functions.
  375. *
  376. * @default 'connectAdvanced'
  377. */
  378. methodName?: string | undefined;
  379. /**
  380. * If defined, a property named this value will be added to the props passed to the wrapped component. Its value
  381. * will be the number of times the component has been rendered, which can be useful for tracking down unnecessary
  382. * re-renders.
  383. *
  384. * @default undefined
  385. */
  386. renderCountProp?: string | undefined;
  387. /**
  388. * Controls whether the connector component subscribes to redux store state changes. If set to false, it will only
  389. * re-render on <code>componentWillReceiveProps</code>.
  390. *
  391. * @default true
  392. */
  393. shouldHandleStateChanges?: boolean | undefined;
  394. /**
  395. * The key of props/context to get the store. You probably only need this if you are in the inadvisable position of
  396. * having multiple stores.
  397. *
  398. * @default 'store'
  399. */
  400. storeKey?: string | undefined;
  401. /**
  402. * @deprecated Use forwardRef
  403. *
  404. * @default false
  405. */
  406. withRef?: boolean | undefined;
  407. /**
  408. * The react context to get the store from.
  409. *
  410. * @default ReactReduxContext
  411. */
  412. context?: Context<ReactReduxContextValue> | undefined;
  413. }
  414. export interface ReactReduxContextValue<SS = any, A extends Action = AnyAction> {
  415. store: Store<SS, A>;
  416. storeState: SS;
  417. }
  418. export interface ProviderProps<A extends Action = AnyAction> {
  419. /**
  420. * The single Redux store in your application.
  421. */
  422. store: Store<any, A>;
  423. /**
  424. * Optional context to be used internally in react-redux. Use React.createContext() to create a context to be used.
  425. * If this is used, generate own connect HOC by using connectAdvanced, supplying the same context provided to the
  426. * Provider. Initial value doesn't matter, as it is overwritten with the internal state of Provider.
  427. */
  428. context?: Context<ReactReduxContextValue> | undefined;
  429. children?: ReactNode;
  430. }
  431. /**
  432. * Makes the Redux store available to the connect() calls in the component hierarchy below.
  433. */
  434. export class Provider<A extends Action = AnyAction> extends Component<ProviderProps<A>> { }
  435. /**
  436. * Exposes the internal context used in react-redux. It is generally advised to use the connect HOC to connect to the
  437. * redux store instead of this approach.
  438. */
  439. export const ReactReduxContext: Context<ReactReduxContextValue>;
  440. /**
  441. * Wraps ReactDOM or React Native's internal unstable_batchedUpdate function. You can use it to ensure that
  442. * multiple actions dispatched outside of React only result in a single render update.
  443. */
  444. export function batch(cb: () => void): void;
  445. // tslint:disable:no-unnecessary-generics
  446. /**
  447. * Compares two arbitrary values for shallow equality. Object values are compared based on their keys, i.e. they must
  448. * have the same keys and for each key the value must be equal according to the `Object.is()` algorithm. Non-object
  449. * values are also compared with the same algorithm as `Object.is()`.
  450. */
  451. export function shallowEqual<T>(left: T, right: any): boolean;
  452. /**
  453. * A hook to access the redux `dispatch` function.
  454. *
  455. * Note for `redux-thunk` users: the return type of the returned `dispatch` functions for thunks is incorrect.
  456. * However, it is possible to get a correctly typed `dispatch` function by creating your own custom hook typed
  457. * from the store's dispatch function like this: `const useThunkDispatch = () => useDispatch<typeof store.dispatch>();`
  458. *
  459. * @returns redux store's `dispatch` function
  460. *
  461. * @example
  462. *
  463. * import React from 'react'
  464. * import { useDispatch } from 'react-redux'
  465. *
  466. * export const CounterComponent = ({ value }) => {
  467. * const dispatch = useDispatch()
  468. * return (
  469. * <div>
  470. * <span>{value}</span>
  471. * <button onClick={() => dispatch({ type: 'increase-counter' })}>
  472. * Increase counter
  473. * </button>
  474. * </div>
  475. * )
  476. * }
  477. */
  478. // NOTE: the first overload below and note above can be removed if redux-thunk typings add an overload for
  479. // the Dispatch function (see also this PR: https://github.com/reduxjs/redux-thunk/pull/247)
  480. export function useDispatch<TDispatch = Dispatch<any>>(): TDispatch;
  481. export function useDispatch<A extends Action = AnyAction>(): Dispatch<A>;
  482. /**
  483. * A hook to access the redux store's state. This hook takes a selector function
  484. * as an argument. The selector is called with the store state.
  485. *
  486. * This hook takes an optional equality comparison function as the second parameter
  487. * that allows you to customize the way the selected state is compared to determine
  488. * whether the component needs to be re-rendered.
  489. *
  490. * If you do not want to have to specify the root state type for whenever you use
  491. * this hook with an inline selector you can use the `TypedUseSelectorHook` interface
  492. * to create a version of this hook that is properly typed for your root state.
  493. *
  494. * @param selector the selector function
  495. * @param equalityFn the function that will be used to determine equality
  496. *
  497. * @returns the selected state
  498. *
  499. * @example
  500. *
  501. * import React from 'react'
  502. * import { useSelector } from 'react-redux'
  503. * import { RootState } from './store'
  504. *
  505. * export const CounterComponent = () => {
  506. * const counter = useSelector((state: RootState) => state.counter)
  507. * return <div>{counter}</div>
  508. * }
  509. */
  510. export function useSelector<TState = DefaultRootState, TSelected = unknown>(
  511. selector: (state: TState) => TSelected,
  512. equalityFn?: (left: TSelected, right: TSelected) => boolean
  513. ): TSelected;
  514. /**
  515. * This interface allows you to easily create a hook that is properly typed for your
  516. * store's root state.
  517. *
  518. * @example
  519. *
  520. * interface RootState {
  521. * property: string;
  522. * }
  523. *
  524. * const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
  525. */
  526. export interface TypedUseSelectorHook<TState> {
  527. <TSelected>(
  528. selector: (state: TState) => TSelected,
  529. equalityFn?: (left: TSelected, right: TSelected) => boolean
  530. ): TSelected;
  531. }
  532. /**
  533. * A hook to access the redux store.
  534. *
  535. * @returns the redux store
  536. *
  537. * @example
  538. *
  539. * import React from 'react'
  540. * import { useStore } from 'react-redux'
  541. *
  542. * export const ExampleComponent = () => {
  543. * const store = useStore()
  544. * return <div>{store.getState()}</div>
  545. * }
  546. */
  547. export function useStore<S = RootStateOrAny, A extends Action = AnyAction>(): Store<S, A>;
  548. /**
  549. * Hook factory, which creates a `useSelector` hook bound to a given context.
  550. *
  551. * @param Context passed to your `<Provider>`.
  552. * @returns A `useSelector` hook bound to the specified context.
  553. */
  554. export function createSelectorHook<S = RootStateOrAny, A extends Action = AnyAction>(
  555. context?: Context<ReactReduxContextValue<S, A>>,
  556. ): <Selected extends unknown>(
  557. selector: (state: S) => Selected,
  558. equalityFn?: (previous: Selected, next: Selected) => boolean,
  559. ) => Selected;
  560. /**
  561. * Hook factory, which creates a `useStore` hook bound to a given context.
  562. *
  563. * @param Context passed to your `<Provider>`.
  564. * @returns A `useStore` hook bound to the specified context.
  565. */
  566. export function createStoreHook<S = RootStateOrAny, A extends Action = AnyAction>(
  567. context?: Context<ReactReduxContextValue<S, A>>,
  568. ): () => Store<S, A>;
  569. /**
  570. * Hook factory, which creates a `useDispatch` hook bound to a given context.
  571. *
  572. * @param Context passed to your `<Provider>`.
  573. * @returns A `useDispatch` hook bound to the specified context.
  574. */
  575. export function createDispatchHook<S = RootStateOrAny, A extends Action = AnyAction>(
  576. context?: Context<ReactReduxContextValue<S, A>>,
  577. ): () => Dispatch<A>;
  578. // tslint:enable:no-unnecessary-generics