We’re just as likely to fall into ruts as anyone. In fact, we may be more likely. It’s all too easy to fall into a rut when you’re on a tight deadline and you don’t have time to experiment with all the shiny new features of the library/framework/language you’re using for this project. “Later,” you tell yourself, “I’ll take a deep dive into the docs and really figure out what makes this thing tick.”
All too often that “later” doesn’t come, the drive to experiment fades, and that awesome piece of tech you were going to know front to back becomes just another tool in your belt that you bust out for a very specific set of use cases.
Where I’m most guilty of this is with Redux and React Redux, two great libraries used to handle app-wide state management in React. I started working with them, I got into a flow that worked, and I refused to dig my way out of it.
Until now, that is. Today I’m going to show you three ways to use Redux with React. Two of these ways take advantage of the React Redux helper library, and one is implemented purely with Redux and custom React Hooks.
Intrigued? Start up your terminal and let’s get to it.
You can find the complete code on GitHub.
1. Prep and Install
Create React App is a great tool offered by Facebook, who also created React and Redux, designed to bootstrap a functioning React app for you in minutes. If you haven’t, I’d recommend installing it globally by entering:
npm i -g create-react-app
After that, create a new app by typing:
npx create-react-app 3_ways_to_use_redux
When it’s done building, navigate to the root level of your project and type:
npm i redux react-redux
This will install the base Redux library, as well as a library of helpful Hooks and methods especially made to integrate Redux with React.
Just a little bit more and we’ll be ready to do some actual coding, I promise.
Navigate to your src folder and type:
mkdir redux
This will create a folder for you to place your Redux logic in.
Lastly, open your redux folder and type:
touch actions.js constants.js reducers.js store.js
This will create the initial files for you to work with Redux.
Okay! Enough installing. Fire up your favorite IDE and let’s get to work.
#javascript #redux #react
