Use Redux in your React app in just 10 minutes

Dhanraj Acharya
Sep 4, 2018 · 2 min read
React + Redux

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 todo app with redux in just 5 minutes.

The idea behind Redux

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

As Redux says,

A 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 only source 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 sql db. there can be may according to your application.

Tutorial

Step-1

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

create-react-app todo-app

Step-2

Install dependencies

npm install lodash @material-ui/core @material-ui/icons react-redux redux redux-logger

Step-3

If you want to learn an efficient way to store your files, use ducks file structure. But for simplicity, we will be using 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 dispatch actions from your component to send data to the state store.

action.js

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

reducer.js
store.js

Step-4

create a new todo.js 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 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 with the redux store.

Open your App.js and add redux provider so all of the children can access the store.

Inside your todo.js, connect it with the store using 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 component’s props. Also the other two functions(actions) will be available in props.

end part todo.js

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

If you want the whole app code then it is available at this github repository.

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, clap! 👏👏👏.

wineofbits

A wine made out of the experience for knowledge-thirsty people.

Dhanraj Acharya

Written by

Full Stack Developer. I love experimenting with new tools and tech. More @ https://drex44.github.io If you can’t read any story due to the WALL then DM me @Twtr

wineofbits

A wine made out of the experience for knowledge-thirsty people.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade