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

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

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

REDUCERS

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

STORE

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?

OTHER ACTIONS & REDUCERS

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

--

--

--

full-stack developer exploring how software can solve real-world problems | https://sarabastian.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React + Node + Serverless

Pivot Grid for Vue 3 applications

JavaScript Pivot table for Vue 3 apps

Why a locale is sometimes not enough in Laravel.

The Anatomy of a JavaScript Function (part 1)

Yabridge: VST and VST3 on linux definitive tool

How to change tabs conditionally while using Angular Material Tabs

GraphQL Mutations with React and Apollo Client

Creating my first web app with Streamlit library

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/

More from Medium

Input Validation in React Hook Form & sending emails using EmailJS in ReactJS

Deploying a react package to NPM

Getting Started with Redux

React & Chart.js