Redux Basic Indroduction

1. What is Redux?

Redux is a predictable state container for JavaScript application. The state of your application is kept in a store, and each component can access any state that it needs from this store.

2. Why is Redux?

Most libraries like React, Angular, etc. are built with a way for components to internally manage their state without any need for an external library or tool. It does well for applications with few components, but as the application grows bigger, managing states shared across components becomes very hard.

In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component, so sharing data among sibling components becomes difficult. So that is why redux is come up with solving these issues by managing states in theapplication.

3. How Redux works?

  • Create the store.
const store = createStore(mathsReducer, 1);

1 is the default state.

  • By adding the reducer to store,we tell the store who responsible for changing the state. Here reducer is responsible for changing the state.

One reducer typically handle multiple actions. reducer always has to return state.

  • Then dispatch an action. This is how to dispatch an action.
  • dispatch action handle by the reducer. Reducer has switch statement and check the action type and return the new state.
  • After that new state is stored in the store.
  • subscribe method inform that state is changed.
store.subscribe(() => {console.log("Store updated", store.getState());});

Here this is the simple code to how the states are changed by redux.

In this example, same state is changed. Not created different states for every dispatchers.

In this example we are going to create new state object for every dispatchers.(immutable states)

4. Multiple reducers

Here we are going to use multiple reducers. Redux is support for multiple reducers. Here we are using combineReducers from redux library.

Important: Must use unique action types when we are using also multiple reducers. We are using one store. If we use same action type for different action, store couldn’t identify which action should be execute.

5. Redux Middleware

Middleware is executed before handling the action(before state is changed).

Here we are using applyMiddleware from redux library.

6. Redux Logger

In redux, there is nice user friendly logger called “redux-logger”. It is also library.

import logger from “redux-logger”;

References

https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/

https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

https://redux.js.org/faq/general/

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Async/Await

Vue.js Interview Challenge — #11— Direction Arrow — Solution

Imagine Execution Context and Hoisting

How do Testing in Ionic 6 with React and Karma

GraphQL Code Generator for Typescript React Apollo

Chrome extension for beginner

Asynchronous Nature of JavaScript

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
Pramod Shehan

Pramod Shehan

More from Medium

What is New in ReactJS 18

Redux — A birds-eye view

A coding environment

React.js — Day 04