React Redux with hooks

Jennifer Williams shows us how use Redux with Hooks

When I was first learning Redux I found all the moving parts and files incredibly hard to wrap my head around. Surprisingly, React hooks made the process of using Redux a lot easier for me.

The post provides us with a two-fold example. One “without hooks” and one “with hooks”. Here’s the “with hooks” version, which will look very familiar if you’ve already used both technologies (but not together):

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increaseVote, decreaseVote } from '../actions';

const AnimeCard = ({ anime }) => {
   const dispatch = useDispatch();
   const animesInStore = useSelector(state => state.animes);
   return (
      <div className="card">
         <h2>Name: {}</h2>
         <p>Votes: {anime.votes}</p>
         <img src={anime.image} alt={}></img>
         <br />
            onClick={() => {
            onClick={() => {

export default AnimeCard;

If you’re new to Redux, Jennifer has also written A Beginner’s Guide to Redux that you can check out.

React Redux with hooks →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.