ReactJs Redux

How to Use Redux in Your ReactJS App in Just 10 Minutes?

In this post, we will learn the principles behind Redux and how to use Redux in a ReactJS-based application. Let’s get started!

If you have decided to use Redux as your state management library, now you actually have done the hard part. Deciding which library to use. Everything else is very easy and fast. Follow along to create a to-do app with Redux in just 5 minutes.

The Idea Behind Redux

You have mainly three components: store, reducer, and actions.

As per the Redux docs:

Store holds the whole state [tree] of your application. The only way to change the state inside it is to dispatch an action on it.

Actions are payloads of information that send data from your application to your store. They are the onlysource of information for the store.

We will define two actions, createItem and deleteItem.

Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.

We will create one reducer just like a table in a SQL DB, but you can create more if you need to.

Tutorial

Step 1

Create a new React app using CRA (create-react-app).

Step 2

Install dependencies.

Step 3

If you want to learn an efficient way to store your files, use the ducks file structure. But, for simplicity, we will be using a simple file structure.

Create a new folder inside src named “modules.”

Create three files inside the folder: action.js, reducer.js, store.js

Actions are simple objects with one mandatory property type. You can dispatch actions from your component to send data to the state store.

action.js

Ideally, you should create another file for your action types.

store.js

Step 4

Create a new todo.js file in a new folder inside src named “pages.” This will contain our todo list component. This example is focused on Redux so we won’t try to create a component/containers. We will have our entire app in this file only.

Create the UI with a form and a list to show the tasks.

todo.js

Step 5

It’s time to connect our todo component to the Redux store.

Open your app.js file and add the Redux provider so all of the child properties can access the store.


Inside your todo.js file, connect it with the store using the connect component from react-redux. Add these at the end of the file in todo.js.

Now, the items from store will be available in the component’s props. Also, the other two functions (actions) will be available in props.


Lastly, call createItem and deleteItem inside of handleSubmit and handleDelete, respectively.

Conclusion

And that’s it! Did this work for you? Please leave any questions and comments below!

Thank you for reading! If you found this article helpful, please like it!

Rahul Sharma

Rahul Sharma is a Founder of Logical IDEA and Bee Flirty. He is a Professional WP Developers, UX Designer, and Digital Marketing Expert. Previously, He Worked as a Digital Marketing Head for An eCommerce Startup. He Graduated with honors from Lovely Professional University with a Dual Degree in Information Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *