Redux is a powerful state management tool that helps developers build complex applications that can easily scale over time. Using Redux in conjunction with React, a powerful frontend JavaScript framework, can help you build powerful, sophisticated frontend applications that can easily be set up, improved, grown, and modified.
In this blog, we’ll cover some React Redux basics and demonstrate how to create a controlled form using Redux in React.
We’ll start by creating our React app. Navigate to the directory in which you want your app to live, then run the following command:
This will install redux at the same time your app is created. If you want to add redux to an existing React app, you can navigate into that app’s directory, then run the following command:
Redux also offers some extra tools that make state management even easier. To gain access to these tools, run the following command:
Check your package.json. Your dependencies should now include a version of react-redux and a version of @reduxjs/toolkit.
Since we’re going to be creating a controlled form using Redux, let’s start by building out some simple React components to create a form similar to this one:
This form won’t actually be communicating with a server (although it certainly could if you wanted to). It’s just going to serve as a basic example of a controlled form.
Let’s start by making the following Form component:
Then, we’ll make a page for our Form to live on, in case there are other features or components we want to display alongside our form:
You might have noticed that I’m importing “styled” from “styled-components” and have added some preliminary styling to my form. You don’t have to do this, but if you want to emulate what I’ve done, you can run the following command to install styled components:
Styled components are a great way to use custom CSS to style your React components. Learn more about styled components here.
Now, set up your App component to include your FormPage:
At this point, your src folder should look something like this:
Try running “npm start” in your terminal to view your React App. It should look very similar to the form included above.
Now let’s jump into redux. We’ll be creating two new files to handle state for our controlled form — store.js and formSlice.js. Our formSlice.js file is where we’ll handle the logic for updating our state. To keep our files well organized, let’s create a new folder within src called “form”, and move our formSlice.js, Form.js, and FormPage.js files into our new “form” folder. Make sure you update the import in your App component to specify the correct relative path.
Now let’s build out the logic for handling our state updates in our formSlice.js file.
The console.log in our handleChange action isn’t strictly necessary, but it’s helpful for verifying that your form is working properly.
Then, we’ll build out the necessary logic for our store in our store.js file:
Next, we’ll adjust our index.js file such that all components in our application have access to our store:
Note that we have to import store from “./store” and Provider from “react-redux”. We’re then going to wrap our App component in our Provider and pass store down as props to our Provider.
Finally, we’ll need to implement state control within our Form component:
We now have a controlled form! This is just a simple example, but you can use this same type of logic to integrate a controlled form into a larger and more sophisticated React application using Redux. Happy coding!
