React hook for accessing mapped state and dispatch from a Redux store.
Table of Contents
- Quick Start
- Related projects
# Yarnyarn add redux-react-hook# NPMnpm install --save redux-react-hook
//// Bootstrap your app//;ReactDOM.render,document.getElementById'root',;
//// Individual components//;;
NOTE: React hooks require
16.8.0 or higher.
Before you can use the hook, you must provide your Redux store via
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:
Runs the given
mapState function against your store state, similar to
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
You can use props or other component state in your
mapState function. It must be memoized with
useMappedState will infinitely recurse if you pass in a new mapState function every time.
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
To avoid specifying the comparison function on every call to
useMappedState, you can provide the defaultEqualityCheck option to
shallowEqual function from
fast-equals is another good option, as it handles shallow comparisons of
Sets as well as objects.
NOTE: Every call to
useMappedState will subscribe to the store. If the store updates, though, your component will only re-render once. So, calling
useMappedState more than once (for example encapsulated inside a custom hook) should not have a large performance impact. If your measurements show a performance impact, you can switch to returning an object instead.
Simply returns the dispatch method.
Creates an instance of Redux React Hooks with a new
StoreContext. The above functions are just exports of the default instance. You may want to create your own instance if:
- You want better type safety without annotating every callsite. Creating your own instance ensures that the types are the same for all consumers. See the example for more info.
- You want to provide a default implementation of
equalityCheckfor all calls to
- You have multiple Redux stores (this is not common)
// MyStoreHooks.ts;// Example in TypeScript where you have defined IState and ActionIState,Action,Store<IState, Action>>;
create takes an optional
options object with the following options:
defaultEqualityCheck- the default implementation of
equalityCheckto use in
useMappedState, defaults to refence equality (
To restore the pre v4.0.1 comparison behavior, for example:
;;// Example in TypeScript where you have defined IState and ActionIState,Action,Store<IState, Action>>;
You can try out
redux-react-hook right in your browser with the Codesandbox example.
To run the example project locally:
# In one terminal, run `yarn start` in the root to rebuild the library itselfcd ./redux-react-exampleyarn start# In another terminal, run `yarn start` in the `example` foldercd exampleyarn start
Is it typed with TypeScript/Flow?
One of the nice benefits of using hooks is that they are easier to type and less prone to trouble than higher-order components, especially when you are using multiple hooks (vs multiple HOCs).
redux-react-hook comes with both TypeScript definitions and Flow types, both of which should work out of the box when installing with npm/yarn.
How does this compare to React Redux?
redux-react-hook has not been battle and perf-tested, so we don't recommend replacing
react-redux just yet. React Redux also guarantees that data flows top down, so that child components update after their parents, which the hook does not.
How do I fix the error "Too many re-renders. React limits the number of renders to prevent an infinite loop."
You're not memoizing the
mapState function. Either declare it outside of your
stateless functional component or wrap it in
useCallback to avoid creating a
new function every render.
How can I use a selector creator, like in reselect?
If you want to share a selector with props across multiple component instances, create the selector in
useMemo to ensure it has one copy per instance and use it directly in
Here are some other projects that are adding hooks for Redux:
- React Redux has hooks in version 7.1 and above
Special thanks to @sawyerhood and @sophiebits for writing most of the initial implementation! This repo was setup with the help of the excellent
Contributions are definitely welcome! Check out the issues for ideas on where you can contribute. See the CONTRIBUTING.md file for more details.
MIT © Facebook Inc.