react-redux

🦙

react-redux

⌘K

Exports

Readme

Docs

Functions

connectAdvanced

Docs

Import

Tests

References

Source

Connects a React component to a Redux store. It is the base for connect but is less opinionated about how to combine state, props, and dispatch into your final props. It makes no assumptions about defaults or memoization of results, leaving those responsibilities to the caller.It does not modify the component class passed to it; instead, it returns a new, connected component for you to use.

function connectAdvanced<S', TProps', TOwnProps', TFactoryOptions'>(

The selector factory. See SelectorFactory type for details.

selectorFactory: SelectorFactory<S', TProps', TOwnProps', TFactoryOptions'>,

If specified, further customizes the behavior of the connector. Additionally, any extra options will be passed through to your selectorFactory in the factoryOptions argument.

connectOptions?: ConnectOptions & TFactoryOptions'

): AdvancedComponentDecorator<TProps', TOwnProps'>

batch

Docs

Import

Tests

References

Source

Wraps ReactDOM or React Native's internal unstable_batchedUpdate function. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update.

function batch(cb: () => void): void

shallowEqual

Docs

Import

Tests

References

Source

Compares two arbitrary values for shallow equality. Object values are compared based on their keys, i.e. they must have the same keys and for each key the value must be equal according to the Object.is() algorithm. Non-object values are also compared with the same algorithm as Object.is().

function shallowEqual<T'>(left: T', right: any): boolean

useDispatch

Docs

Import

Tests

References

Source

function useDispatch<TDispatch'>(): TDispatch'+1

Example

import React from 'react'
import { useDispatch } from 'react-redux'
export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()
  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increase-counter' })}>
        Increase counter
      </button>
    </div>
  )
}

useSelector

Docs

Import

Tests

References

Source

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.

If you do not want to have to specify the root state type for whenever you use this hook with an inline selector you can use the TypedUseSelectorHook interface to create a version of this hook that is properly typed for your root state.

function useSelector<TState', TSelected'>(

the selector function

selector: (state: TState') => TSelected',

the function that will be used to determine equality

equalityFn?: (left: TSelected', right: TSelected') => boolean

): TSelected'

Example

import React from 'react'
import { useSelector } from 'react-redux'
import { RootState } from './store'
export const CounterComponent = () => {
  const counter = useSelector((state: RootState) => state.counter)
  return <div>{counter}</div>
}

useStore

Docs

Import

Tests

References

Source

A hook to access the redux store.

function useStore<S', A'>(): any

Example

import React from 'react'
import { useStore } from 'react-redux'
export const ExampleComponent = () => {
  const store = useStore()
  return <div>{store.getState()}</div>
}

createSelectorHook

Docs

Import

Tests

References

Source

Hook factory, which creates a useSelector hook bound to a given context.

function createSelectorHook<S', A'>(

context?: Context

): <Selected'>(

selector: (state: S') => Selected',

equalityFn?: (previous: Selected', next: Selected') => boolean

) => Selected'

createStoreHook

Docs

Import

Tests

References

Source

Hook factory, which creates a useStore hook bound to a given context.

function createStoreHook<S', A'>(context?: Context): () => any

createDispatchHook

Docs

Import

Tests

References

Source

Hook factory, which creates a useDispatch hook bound to a given context.

function createDispatchHook<S', A'>(context?: Context): () => any

Interfaces

DefaultRootState

Docs

Import

Tests

References

Source

This interface can be augmented by users to add default types for the root state when using react-redux. Use module augmentation to append your own type definition in a your_custom_type.d.ts file. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation

interface DefaultRootState {

}

DispatchProp

Docs

Import

Tests

References

Source

interface DispatchProp<A' = any> {

dispatch: any

}

Type Aliases

AnyIfEmpty

Docs

Import

Tests

References

Source

type AnyIfEmpty<T'> = AnyIfEmpty<T>

RootStateOrAny

Docs

Import

Tests

References

Source

type RootStateOrAny = any

Omit

Docs

Import

Tests

References

Source

type Omit<T', K'> = Pick<T', Exclude>

DistributiveOmit

Docs

Import

Tests

References

Source

type DistributiveOmit<T', K'> = DistributiveOmit<T, K>

AdvancedComponentDecorator

Docs

Import

Tests

References

Source

type AdvancedComponentDecorator<TProps', TOwnProps'> = (component: ComponentType) => any

Matching

Docs

Import

Tests

References

Source

A property P will be present if:

it is present in DecorationTargetProps

Its value will be dependent on the following conditions

if property P is present in InjectedProps and its definition extends the definition in DecorationTargetProps, then its definition will be that of DecorationTargetProps[P]
if property P is not present in InjectedProps then its definition will be that of DecorationTargetProps[P]
if property P is present in InjectedProps but does not extend the DecorationTargetProps[P] definition, its definition will be that of InjectedProps[P]

type Matching<InjectedProps', DecorationTargetProps'> = { }

Shared

Docs

Import

Tests

References

Source

a property P will be present if :

it is present in both DecorationTargetProps and InjectedProps
InjectedProps[P] can satisfy DecorationTargetProps[P] ie: decorated component can accept more types than decorator is injecting

For decoration, inject props or ownProps are all optionally required by the decorated (right hand side) component. But any property required by the decorated component must be satisfied by the injected property.

type Shared<InjectedProps', DecorationTargetProps'> = { }

GetProps

Docs

Import

Tests

References

Source

type GetProps<C'> = GetProps<C>

GetLibraryManagedProps

Docs

Import

Tests