Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

What is Redux ?

Posted on June 14, 2021December 2, 2021 By christo No Comments on What is Redux ?

Redux is a predictable state container for JavaScript apps to reduce the apps complexity. in other words Redux is a pattern and library for managing and updating application state, using events called “actions”

  • Redux is Flux like libraries. and Redux is based on Flux
  • Redux was created by Dan Abramov and Andrew Clark
  • Redux provides a way to provide the data that React will use to create the UI.

Table of Contents

  • Purpose of Redux
  • When Should we Use Redux ?
  • Redux become more useful when:
  • Redux Libraries and Tools
  • Redux Terms and Concepts :
  • What is Immutability in Redux ?
  • List of All Redux Terminology
  • Reducers in Redux ?

Purpose of Redux

Redux was designed to tackle the challenge of under‐ standing how data changes flow through your application. in other words Redux provides many patterns and tools that make it easier to understand when, where, why, and how the state in your application is being updated

When Should we Use Redux ?

  • Redux helps us to deal with shared state management, but like any tool, it has a compromise

Redux become more useful when:

  • When we have large amounts of application state that are needed in many places in the app
  • The app state is updated frequently over time
  • The logic to update that state may be become more complex
  • The app has a medium or large-sized codebase, and app has been developed by too many people

Redux Libraries and Tools

  • React-Redux:React-Redux is the official package of React-Redux that lets our React components interact with a Redux store by reading pieces of state and dispatching actions to update the store.
  • Redux Toolkit:It contains packages and functions that we think are essential for building a Redux app
  • Redux DevTools Extension:The Redux DevTools Extension shows a history of the changes to the state in your Redux store over time. This allows us to debug our applications effectively, including using powerful techniques like “time-travel debugging”

Redux Terms and Concepts :

State Management

function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

In the above Example there are following parts are:

  • The state, the source of truth that drives our app;
  • The view, a declarative description of the UI based on the current state
  • The actions, the events that occur in the app based on user input, and trigger updates in the state

What is Immutability in Redux ?

Immutability define that something can never be changed

JavaScript objects and arrays are all mutable by default. so In order to update values immutably, Our code must make copies of existing objects/arrays, and then modify the copies

Example:

const obj = {
  a: {
    // To safely update obj.a.c, we have to copy each piece
    c: 3
  },
  b: 2
}

const obj2 = {
  // copy obj
  ...obj,
  // overwrite a
  a: {
    // copy obj.a
    ...obj.a,
    // overwrite c
    c: 42
  }
}

const arr = ['a', 'b']
// Create a new copy of arr, with "c" appended to the end
const arr2 = arr.concat('c')

// or, we can make a copy of the original array:
const arr3 = arr.slice()
// and mutate the copy:
arr3.push('c')


List of All Redux Terminology

  • Actions :An action is a plain JavaScript object that has a type field. We can think of an action as an event that describes something that happened in the application.

A typical action object Example

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}
  • Action Creators :An action creator is a function that creates and returns an action object

Example:

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

Reducers in Redux ?

Reducers are pure functions that return a new state based on the current state and an action: (state, action) => newState

Example:

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}
  • Store :The current Redux application state lives in an object called the store . The store is created by passing in a reducer, and has a method called getState that returns the current state value:

Example:

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

  • Dispatch :The Redux store has a method called dispatch. The only way to update the state is to call store.dispatch() and pass in an action object. The store will run its reducer function and save the new state value inside, and we can call getState() to retrieve the updated value

Example:

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

  • Selectors :Selectors are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data:

Example

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2


Visit the official documentation of Redux:

React.js, Redux Tags:React Redux, Redux

Post navigation

Previous Post: What is Flux in React ?
Next Post: React Router

Related Posts

Hook in React React.js
React js React.js
React Router React.js
React Components React.js
React.StrictMode tag in React in App.js? React.js
What is React Component Lifecycle ? React.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech