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.

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: