GitHub image
react-redux
⌘K
Exports
Readme
Docs
Functions
9
connectAdvanced
Docs
Import
Tests
3
References
2

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
3
References
2

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
3
References
2

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
3
References
2
function useDispatch<TDispatch'>(): TDispatch'+1
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
3
References
2

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
1
2
3
4
5
6
7
8
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
3
References
2

A hook to access the redux store.

function useStore<S', A'>(): any
Example
1
2
3
4
5
6
7
import React from 'react'
import { useStore } from 'react-redux'
export const ExampleComponent = () => {
const store = useStore()
return <div>{store.getState()}</div>
}
createSelectorHook
Docs
Import
Tests
3
References
2

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
3
References
2

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

function createStoreHook<S', A'>(context?: Context): () => any
createDispatchHook
Docs
Import
Tests
3
References
2

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

function createDispatchHook<S', A'>(context?: Context): () => any
Interfaces
2
DefaultRootState
Docs
Import
Tests
3
References
2

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
3
References
2
interface DispatchProp<A' = any> {
dispatch: any
}
Type Aliases
9
AnyIfEmpty
Docs
Import
Tests
3
References
2
type AnyIfEmpty<T'> = AnyIfEmpty<T>
RootStateOrAny
Docs
Import
Tests
3
References
2
type RootStateOrAny = any
Omit
Docs
Import
Tests
3
References
2
type Omit<T', K'> = Pick<T', Exclude>
DistributiveOmit
Docs
Import
Tests
3
References
2
type DistributiveOmit<T', K'> = DistributiveOmit<T, K>
AdvancedComponentDecorator
Docs
Import
Tests
3
References
2
type AdvancedComponentDecorator<TProps', TOwnProps'> = (component: ComponentType) => any
Matching
Docs
Import
Tests
3
References
2

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
3
References
2

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
3
References
2
type GetProps<C'> = GetProps<C>
GetLibraryManagedProps
Docs
Import
Tests
3
References
2
type GetLibraryManagedProps = any
Description
Official React bindings for Redux
Install
yarn add react-redux
Copy
Details
MIT License
6 Dependencies
Definitely Typed
Metrics
Weekly Downloads