React-Redux

Redux + React

Ahmet Suhan Oka
Mar 18 · 4 min read

What is Redux and Why Use?

First of all, React is a UI library and Redux is a JavaScript Library. Redux allows us to manage State in JavaScript applications. Redux is not tied to React. It can be used with React, Angular, Vue or even Vanilla JavaScript. I think React and Redux’s name are mentioned together too much because they are popular with together, they work so well in an integrated way. Redux is referred to in the literature as an Application Statement Manager (ASM) that is, as an application status manager.

“Redux is a predictable state container for JavaScript apps”

Figure1

Imagine that you are using hundreds or even thousands of components in a project. After a while, managing our stats without using Redux can really become almost impossible. At this point, we can say that using Redux saves lives.😃 Redux offers us the opportunity to use our States globally, so when we want to use a state in our top layer to in a lower component in our project, we get rid of this phenomenon called props drilling thanks to redux 🚀

When we examine Redux, there is a Store concept as seen in the image above. So what is this Store?

Store is actually a JavaScript Object. We can think of this concept called Store as a database. Although it does not exactly meet the meaning of database, we can do it to understand at first. 😄. Let’s say we have one state and our components are tracking to this state. When we make changes on this state, our components update themselves according to the changes. This single state is actually our Store object.

So if we sum up briefly, Redux provides us to Global State Management, It offers us state management from one place, thus preventing us from drowning in props.🚣

Redux Data Flow

In this section, I will try to explain Redux Data Flow on figure shown below.

Redux Data Flow

The View part seen in the picture above is the first screen a user encounters when users open the web page. Let’s say we have an input field on this screen and our user typed own name and pressed the save button. The moment he/she pressed it, an action happened. This action corresponds to the Actions part. In this Actions section, we need to dispatch the name written by the user to the Store section. After the sent information arrives at the Store, it is met by our Reducers at the relevant location. Reducers take the state provided by store and make the change or action that needs to be done. After that, submits this updated state forth to the Store. We have only one State object on the Store, after the state is updated, it goes back to the View section, View section also gets updated.

According to me, the most important things to be known:

  • There is only one Store
  • There are Reducers under the Store
  • The only job Reducers do is data exchange. Reducers are pure functions that is, they are functions that have no effect. Pure Function called as function that return a single value😅

React-Redux

By now, we should be aware that we have React which is a UI library and we have Redux which is a state managament library. They work both independently each other to directly use Redux in our React application it is a bit confusing and also diffucult that is the reason we have the React-Redux Package. React-Redux is the official Redux UI binding library for React. What we mean by that is React-Redux offers a couple of functions that will help us to connect our React application with Redux so if we are using React and Redux together , we should also use React- Redux to bind the two libraries.

Let me quickly summarize the points we have learned so far

  • React is a library used to build user interfaces
  • Redux is a library for managing state in a predictable way in JavaScript applications
  • React-Redux is a library that provides binding to use React and Redux together in an application

Thanks for reading, see you next time 👋

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Ahmet Suhan Oka

Written by

Front-End Developer

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store