# redux-react-hook
**Repository Path**: mirrors_facebookarchive/redux-react-hook
## Basic Information
- **Project Name**: redux-react-hook
- **Description**: React Hook for accessing state and dispatch from a Redux store
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-11
- **Last Updated**: 2026-07-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# redux-react-hook
> React hook for accessing mapped state and dispatch from a Redux store.
[](https://travis-ci.com/facebookincubator/redux-react-hook)
[](https://www.npmjs.com/package/redux-react-hook)
[](https://bundlephobia.com/result?p=redux-react-hook@latest)
# This project has been DEPRECATED
With the release of the [hooks API in react-redux 7](https://react-redux.js.org/api/hooks), this project has become redundant.
## Table of Contents
- [Install](#install)
- [Quick Start](#quick-start)
- [Usage](#usage)
- [`StoreContext`](#storecontext)
- [`useMappedState(mapState, equalityCheck?)`](#usemappedstatemapstate-equalitycheck)
- [`useDispatch()`](#usedispatch)
- [`create(options?)`](#createoptions)
- [Example](#example)
- [FAQ](#faq)
- [Related projects](#related-projects)
- [Thanks](#thanks)
- [Contributing](#contributing)
- [License](#license)
## Install
```bash
# Yarn
yarn add redux-react-hook
# NPM
npm install --save redux-react-hook
```
## Quick Start
```tsx
//
// Bootstrap your app
//
import {StoreContext} from 'redux-react-hook';
ReactDOM.render(
,
document.getElementById('root'),
);
```
```tsx
//
// Individual components
//
import {useDispatch, useMappedState} from 'redux-react-hook';
import shallowEqual from 'shallowequal';
export function DeleteButton({index}) {
// Declare your memoized mapState function
const mapState = useCallback(
state => ({
canDelete: state.todos[index].canDelete,
name: state.todos[index].name,
}),
[index],
);
// Get data from and subscribe to the store
const {canDelete, name} = useMappedState(mapState, shallowEqual);
// Create actions
const dispatch = useDispatch();
const deleteTodo = useCallback(
() =>
dispatch({
type: 'delete todo',
index,
}),
[index],
);
return (
);
}
```
## Usage
NOTE: React hooks require `react` and `react-dom` version `16.8.0` or higher.
### `StoreContext`
Before you can use the hook, you must provide your Redux store via `StoreContext.Provider`:
```tsx
import {createStore} from 'redux';
import {StoreContext} from 'redux-react-hook';
import reducer from './reducer';
const store = createStore(reducer);
ReactDOM.render(
,
document.getElementById('root'),
);
```
You can also use the `StoreContext` to access the store directly, which is useful for event handlers that only need more state when they are triggered:
```tsx
import {useContext} from 'react';
import {StoreContext} from 'redux-react-hook';
function Component() {
const store = useContext(StoreContext);
const onClick = useCallback(() => {
const value = selectExpensiveValue(store.getState());
alert('Value: ' + value);
});
return ;
}
```
### `useMappedState(mapState, equalityCheck?)`
Runs the given `mapState` function against your store state, similar to
`mapStateToProps`. Unlike `mapStateToProps`, however, the result of your
`mapState` function is compared for reference equality (`===`) by default. To
use shallow equal comparison, pass in a comparision function as the second
parameter.
```tsx
const state = useMappedState(mapState);
```
You can use props or other component state in your `mapState` function. It must be memoized with `useCallback`, because `useMappedState` will infinitely recurse if you pass in a new mapState function every time.
```tsx
import {useMappedState} from 'redux-react-hook';
function TodoItem({index}) {
// Note that we pass the index as a dependency parameter -- this causes
// useCallback to return the same function every time unless index changes.
const mapState = useCallback(state => state.todos[index], [index]);
const todo = useMappedState(mapState);
return
{todo}
;
}
```
If you don't have any inputs (the second argument to `useCallback`) pass an empty array `[]` so React uses the same function instance each render. You could also declare `mapState` outside of the function, but the React team does not recommend it, since the whole point of hooks is to allow you to keep everything in the component.
The second parameter to `useMappedState` is used to determine if a new result from the `mapState` function is the same as the previous result, in which case your component will not be re-rendered. Prior to v4.0.1, this was hard-coded to a shallow equality check. Starting in v4.0.1, `equalityCheck` defaults to reference equality (using `===`). To restore the old behavior, which is particularly useful when you are returning an object, you can use the [`shallowequal`](https://www.npmjs.com/package/shallowequal) module:
```tsx
import {useMappedState} from 'redux-react-hook';
import shallowEqual from 'shallowequal';
function TodoItem({index}) {
// Note that we pass the index as a dependency parameter -- this causes
// useCallback to return the same function every time unless index changes.
const mapState = useCallback(
state => ({
todo: state.todos[index],
totalCount: state.todos.length,
}),
[index],
);
const {todo, totalCount} = useMappedState(mapState, shallowEqual);
return