Redux hooks code-along: to-do app

  • Note, this tutorial will not go over the backend setup, but you can take a look at that code here

My Current Code

original Main component (pre-Redux)
original Day component (pre-Redux)
original Day component (pre-Redux)
original Day component (pre-Redux)

Starting with Redux — Explained in words

First, let’s install the redux dependencies (specific for React in my case):

npm install react-redux//or if you are using yarnyarn add react-redux
Redux lifecycle
  • fetching the days (GET request)
  • fetching the tasks (GET request)
  • adding a task (POST request)
  • deleting a task (DELETE request)

Getting into the Code


So let’s start putting this into code, starting with our actions. To reiterate, actions are a Javascript object that have a type attribute, which describes what happened. For example, instead of using the fetch directly in a useEffect hook, we will place that in a universal action, which will eventually get dispatched in the hook.

file that exports action strings as constants
code for my getDays action creator


Reducers are functions that accept state and an action in the argument, which help calculate the new state value, but they cannot alter the existing state. Instead, they must make copies (i.e. with the spread operator, etc.) and make changes to those copies.

code for daysReducer file
file that combines reducer, which will get exported and used in createStore method.


Now, before we add this to our Main component, we need to wrap our application in a <Provider >… </Provider> component to render the store available throughout the component tree (so that we can dispatch actions and change state anywhere).

Index.js file

One of the main use cases for this middleware is for handling actions that might not be synchronous, for example, using axios to send a GET request. Redux Thunk allows us to dispatch those actions asynchronously and resolve each promise that gets returned.


Main.js with redux

Why Hooks?

If you’re familiar with Redux , you’ll notice we haven’t used the higher order function connect(), mapStateToProps, or mapDispatchToProps. These hooks give access to the Redux store and dispatch actions without having to wrap your components in connect(), allowing for less and more semantic code in my opinion.


Virtually the same logic is employed for fetching and displaying the tasks in the Day component, so I will not rehash that process, and adding / deleting tasks is only slightly different.

action creator for adding tasks
Day component with redux
Day component passing props to child component



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sara Bastian

Sara Bastian

full-stack developer exploring how software can solve real-world problems |