What is Redux

Redux

Redux is nothing but a storehouse which contains the state of the application. It becomes a painful task when the size of application becomes large to manage the state of each component in your application. So redux comes to our rescue in doing so and maintaining and updating the state of each component in our application.

Redux is often found confusing when we try our hands on it for the first time. So I will quote an example to make you understand what redux is and why do we need redux at all.

In react application there is unidirectional data flow by unidirectional I mean data flows from parent components to child components not the other way around so you send the data from parent components to child components in the form of what we call as props then this child component make use of this prop.

In react application everything is a component Imagine how difficult it becomes if there are too many components in your application like the one in the image given below

so it becomes difficult to manage the flow of data from parent to child components. This is the first reason why we use redux as it manages the states of all the components for us.

Now coming back to the what is redux part?

Redux is an open-source JavaScript library for managing application state

There are few concepts which you need to understand for understanding redux properly I will try to explain them with the help of an example.

Let’s say you ordered pair of shoes from flipkart after ordering the shoes you get the delivery from the delivery agent in a specified time. So here your ordering of shoes is a action which is one of the concepts of redux.

After you perform an action here in this case ordering of shoes is an action you wait for the delivery but does it happen like that as soon as you order something from flipkart you get the delivery straight away. No in reality it takes time and there is a process which gets followed everytime when you order something from your favorite website.

So similary in redux after performing the action there is a term called dispatch that sends your action to reducer. Just like after placing the order your package is shipped to nearest warehouse to your address. The same work in redux is done by dispatch.

Now Reducer looks at the action and accordingly do what it needs to do for storing the data in store. Reducer is nothing but a file consisting of switch case statement and used for storing the data in a store and returning the updated state value from the store. So whenever the state is updated the value in the store gets updated too.

By this way we eventually keep the state of the application in a store. Below is a hello world implementation in react using redux.

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.

Installation

Redux is available as a package on NPM for use with a module bundler or in a Node application:

npm install --save redux

It is also available as a precompiled UMD package that defines a window.Redux global variable. The UMD package can be used as a <script> tag directly.

For more details, see the Installation page.

Redux Starter Kit

Redux itself is small and un-opinionated. We also have a separate package called redux-starter-kit, which includes some opinionated defaults that help you use Redux more effectively.

It helps simplify a lot of common use cases, including store setup, creating reducers and writing immutable update logic, and even creating entire "slices" of state at once.

Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, redux-starter-kit can help you make your Redux code better.

Basic Example

The whole state of your app is stored in an object tree inside a single store. The only way to change the state tree is to emit an action, an object describing what happened. To specify how the actions transform the state tree, you write pure reducers.

That's it!

import { createStore } from 'redux'
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
let store = createStore(counter)

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

Instead of mutating the state directly, you specify the mutations you want to happen with plain objects called actions. Then you write a special function called a reducer to decide how every action transforms the entire application's state.

In a typical Redux app, there is just a single store with a single root reducing function. As your app grows, you split the root reducer into smaller reducers independently operating on the different parts of the state tree. This is exactly like how there is just one root component in a React app, but it is composed out of many small components.