flepretre/use-redux

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.

Migration to react-redux

Provider

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';

export const Clock = props => {
  const [ state, dispatch ] = useRedux();
  
  useEffect(() => {
    const timeout = setTimeout(
      () => dispatch({ type: 'SET', count: state.count + 1 }),
      1000,
    );
    
    return () => clearTimeout(timeout);
  }, []);

  return state.count;
};

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 selectors
const v1Selector = state => state.value1;
const v2Selector = state => state.value2;

// Some action creators
const a1Creator = () => ({ type: 'FOO' });
const a2Creator = payload => ({ type: 'BAR', payload });

export const MyComponent = props => {
  const [ v1, v2, a1, a2 ] = useRedux([v1Selector, v2Selector], [a1Creator, a2Creator]);
  // 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 selectors
const v1Selector = state => state.value1;
const v2Selector = state => state.value2;

export const MyComponent = props => {
  const [ v1, v2 ] = useSelectors(v1Selector, v2Selector);
  // 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 creators
const setCreator = (payload) => ({ type: 'SET', payload });
const resetCreator = () => ({ type: 'RESET' });

// Hook that set things on mount and clear them when unmount
export const MyCustomHook = (payload) => {
  const [ set, reset ] = useActionCreators(setCreator, resetCreator);
  
  useEffect(() => {
    set(payload);
    
    return () => 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 from
import { ReduxProvider } from 'use-redux';
// Or directly from react-redux 
// import { Provider } from 'react-redux';

// redux store
const store = createStore(reducers)

ReactDOM.render(
  <ReduxProvider store={store}>
    <App />
  </ReduxProvider>,
  document.getElementById('root')
);

See https://react-redux.js.org/api/provider for more

connect (react-redux)

use-redux exports the connect function from react-redux

See https://react-redux.js.org/api/connect for