In this tutorial, I’ll introduce you to the useReducer hook in React by creating a Sticky Note app that has its state managed by a Redux-like store.
Setup and completed code is available on GitHub: https://github.com/codebubb/react-sticky-notes-tutorial
React Project: Sticky Notes App (useReducer Hook()
——————————————————————————
00:00 Introduction
00:24 Project Overview
02:39 Creating the text area input
06:58 Creating the Redux Reducer / Store
12:41 Using useReducer
13:28 Dispatching the ADD_NOTE action
17:30 Rendering notes on Page
18:43 Styling the Sticky Notes
20:34 Drag and Drop for Sticky Notes
24:54 Deleting notes
30:50 Using the other state items
— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —
So in this React tutorial, I’ll introduce you to the useReducer hook if you’re not already familiar with it and also some basic Redux fundamentals if you’ve never used Redux in your apps before.
We’ll be creating a simple Sticky Notes app that manages state by using the useReducer hook. If you’ve not come across Redux before, you’ll learn how to use dispatch actions to our app’s store and update the site object which represents the sticky notes created by the user.
As a bit of an aesthetic challenge, we’ll create a drag-and-drop functionality so that any notes the user creates can be moved around the page.
The two actions we’ll create in our Redux store are for adding new notes and towards the end of the video, we’ll create a delete action that removes the notes from the Redux state.
As a final demonstration we’ll also create some meta information, also inside of our Redux store, to display how many notes have been created and also the time of when the last note was created.
Hope you enjoy this React Redux tutorial focusing on the useReducer hook!
Let me know in the comments below what you think. Channel Handle @codebubb
33 Comments