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)
Main.js
original Day component (pre-Redux)
Day.js
original Day component (pre-Redux)
Day.js
original Day component (pre-Redux)
Day.js

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

ACTIONS

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
actionConstants.js
code for my getDays action creator
getDays.js

REDUCERS

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
daysReducer.js
file that combines reducer, which will get exported and used in createStore method.
rootReducer.js

STORE

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
Index.js

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.

REDUX HOOKS

Main.js with redux
Main.js

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.

OTHER ACTIONS & REDUCERS

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
addTask.js
tasksReducer.js
tasksReducer.js
Day component with redux
Day.js
Day component passing props to child component
Day.js

--

--

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 | https://sarabastian.com/