Understanding how to use Redux using React Hooks in 5 minutes

If you have been using Redux, and wonder how it can be used with React Hooks, this is how it is done:

Traditionally, this is how a component is connected to the Redux store:

import React from 'react';
import { connect } from 'react-redux';

function Count(props) {
  return (
    <div>
      <button onClick={props.increment}> + </button>
      {props.count}
      <button onClick={props.decrement}> - </button>
    </div>
  );
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Count);

Note that the Count component gets the state and the dispatch functions by props. But now, using React Hooks, we can get them by using useSelector() and useDispatch():

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Count() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increment = () => dispatch({ type: 'INCREMENT' });
  const decrement = () => dispatch({ type: 'DECREMENT' });

  return (
    <div>
      <button onClick={increment}> + </button>
      {count}
      <button onClick={decrement}> - </button>
    </div>
  );
}

export default Count;

That's it. useSelector() is similar to mapStateToProps(), and useDispatch() is similar to mapDispatchToProps(). All the other files stay the same, and that's how you can use Redux using React Hooks.

We can think of it this way:

• there are two things we need
• if we don't have redux, but just a React component, we are familiar with the fact that we need (1) the state to display the data, and (2) we need a callback to make the change of state to happen.
• Now, with Redux, similarly, we need:
• (1) is the state from the "one and only store", which is the redux store
• (2) we need a dispatch function to dispatch an action, so that the reducer can create a brand new shiny state for us
• so we can get the state by useSelector()
• and we can get the dispatch function by useDispatch()
• and then, the rest will follow: we have the state to display, and we have the mechanism to change the state if there is a need, using the dispatch().

For further details, check out the official Redux Hooks page.