What is Redux ? - codingtube

Redux is a state management library for JavaScript applications, commonly used with React but also compatible with other view libraries or frameworks. It provides a predictable state container that helps manage the state of an application in a consistent way, making it easier to develop and maintain complex applications, especially those with a large amount of state or complex state interactions.

Key concepts in Redux:

Store:
The store is a single, centralized object that holds the entire state tree of the application. It is the source of truth for the application’s state. The state in the store is read-only, and the only way to change the state is by dispatching actions.
Actions:
Actions are plain JavaScript objects that represent an intention to change the state. They must have a type property that describes the type of action being performed. Actions are typically created by action creator functions.
Reducers:
Reducers are functions that specify how the application’s state changes in response to actions. They take the current state and an action as arguments and return a new state. Reducers must be pure functions, meaning they produce the same output for a given input and have no side effects.
Dispatch:
Dispatch is a method provided by the store that allows you to send actions to the store. When an action is dispatched, the store calls the reducer with the current state and the action, and the state is updated accordingly.
Selectors:
Selectors are functions used to extract specific pieces of information from the state. They help in keeping the components decoupled from the shape and structure of the state.

Redux follows a unidirectional data flow, and the state changes in response to actions are handled in a predictable and traceable manner. This makes it easier to debug and understand how the state evolves over time.

Here’s a simple example of how Redux might be used with React:

// Action types
const INCREMENT = 'INCREMENT';

// Action creator
const increment = () => ({
  type: INCREMENT,
});

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
};

// Store
const { createStore } = require('redux');
const store = createStore(counterReducer);

// React component
const CounterComponent = () => {
  const count = store.getState();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => store.dispatch(increment())}>Increment</button>
    </div>
  );
};

// Subscribe to store changes
store.subscribe(() => {
  // Update UI when the state changes
  render();
});

// Initial render
const render = () => {
  ReactDOM.render(<CounterComponent />, document.getElementById('root'));
};

render();

This is a very basic example, and in a real-world application, you would likely have more complex state, multiple reducers, and actions to manage different parts of the application state. Redux provides a structured way to handle state management, especially in larger applications where keeping track of state can become challenging.

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

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:

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 ?

Leave a Comment Cancel reply