DEPRECATED
Hook to access redux
⚠️ react-redux now provide hooks support. I strongly recommend you to use the official react-redux implementation. If you already use this package switching to react-redux should not be too difficult.
react-redux
Migration toProvider
First thing to do is to replace the use-redux provider by the react-redux one. Just change the import, it the provider underneath.
useRedux
The use-redux
function was remove from the final implementation of react-redux hooks' so I recommend to use useSelector
and useDispatch
.
useSelectors
Hooks are designed to be called multiple time in the same component. If you have more than one selector, just make one call with useSelector
for each selector.
useActionCreators
For this one you have to use useDispatch
that give you access to the dispatch
function.
To understand the switch from bindActionCreators in connect to the dispatch function with hooks I recommend you to read this comment from Dan Abramov.
Getting started
Install
yarn add use-redux
useRedux
You can get the redux state and the dispatch function with useRedux
custom hooks.
import useEffect from 'react';import useRedux from 'use-redux'; const Clock = { const state dispatch = ; ; return statecount;};
This way you can read the redux state in the state
variable, and dispatch redux action with the dispatch
function.
If you don't have a Provider from react-redux
in your app see the Provider section below.
with selectors and action creators
Because your component should not access to the whole state and and the dispatch function, you can pass selectors and action creators to useRedux like that:
import useRedux from 'use-redux'; // Some selectorsconst v1Selector = statevalue1;const v2Selector = statevalue2; // Some action creatorsconst a1Creator = type: 'FOO' ;const a2Creator = type: 'BAR' payload ; const MyComponent = { const v1 v2 a1 a2 = ; // v1 and v2 contains values selected in the redux state // a1 et a2 are function that dispatch redux actions define in creators // render stuff};
See documentation for redux action creators and selectors.
useSelectors
If you don't need to fire actions, you can just use useSelectors hook:
import useSelectors from 'use-redux'; // Some selectorsconst v1Selector = statevalue1;const v2Selector = statevalue2; const MyComponent = { const v1 v2 = ; // v1 and v2 contains values selected in the redux state return <div>v1: v1 and v2: v2</div>;};
useActionCreators
If you don't need to read the state, you can just use useActionCreators hook:
import useEffect from 'react';import useActionCreators from 'use-redux'; // Some action creatorsconst setCreator = payload type: 'SET' payload ;const resetCreator = type: 'RESET' ; // Hook that set things on mount and clear them when unmountconst MyCustomHook = payload const set reset = ; ;;
Dependencies
react-redux
If you're already use redux in your app, you probably use react-redux to bind redux to your react app.
use-redux
uses the context of react-redux
to access the same redux store.
If you don't have react-redux
you need to install it.
yarn add react-redux
⚠️ Due to the new react context API, use-redux is only compatible with react-redux
v6.0.0 or higher.
Provider (react-redux)
use-redux
exports the Provider from react-redux
First, surround your top component with the Provider
and provide a redux store through the store
prop.
import createStore from 'redux';// The provider has a slightly different name so you can easily know where it came fromimport ReduxProvider from 'use-redux';// Or directly from react-redux // import { Provider } from 'react-redux'; // redux storeconst store = ReactDOM;
See https://react-redux.js.org/api/provider for more
connect (react-redux)
use-redux
exports the connect function from react-redux