What is Redux and How Does It Relate to React?

💡 Concept Name

Redux is a predictable state container for JavaScript applications, often used with React to manage complex state globally in a consistent way.

📘 Quick Intro

Redux centralizes application state in a single store, enabling components to access and update state predictably via actions and reducers, complementing React's component-based architecture.

🧠 Analogy / Short Story

Imagine Redux as a library’s central catalog system where all books’ information is stored. Instead of searching individual shelves (components) for books, you check the central catalog (store). React components then request or update the catalog, ensuring everyone works with the same data source, avoiding chaos.

🔧 Technical Explanation

📦 Redux uses a single immutable store to hold application state.
🔄 State changes happen via pure functions called reducers responding to dispatched actions.
⚛️ React integrates with Redux via bindings like react-redux for connecting components to the store.
🛠️ Enables predictable state updates, easier debugging, and time-travel debugging.

💻 Real Code Example


// Redux store setup
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

// React component connected to Redux store
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

❓ Interview Q&A

Q1: What is Redux?
A: Redux is a predictable state container for managing application state.

Q2: How does Redux complement React?
A: By centralizing state management outside React components for predictable and easier state updates.

Q3: What is a reducer in Redux?
A: A pure function that takes current state and action and returns a new state.

Q4: How do React components access Redux state?
A: Using hooks like useSelector or the connect function.

Q5: What is an action in Redux?
A: An object describing a state change with a type property.

Q6: Can Redux be used without React?
A: Yes, Redux is library-agnostic.

Q7: What is the Redux store?
A: The single source of truth holding the app state.

Q8: What are middleware in Redux?
A: Functions that intercept actions for logging, async operations, etc.

Q9: What is time-travel debugging?
A: Ability to go back and forth through dispatched actions to debug state changes.

Q10: How do you dispatch an action?
A: Using the dispatch method from the Redux store or React hooks.

📝 MCQs

Q1. What is Redux?

A UI library
A predictable state container
A CSS framework
A database

Q2. How does Redux complement React?

Replaces React
Centralizes state management
Manages routing
Handles styling

Q3. What is a reducer?

A UI component
A pure function returning new state
A middleware
An action creator

Q4. How to access Redux state in React?

useState hook
useEffect hook
useSelector hook
useRef hook

Q5. What is an action in Redux?

A function
An object describing a state change
A component
A hook

Q6. Can Redux be used without React?

No
Yes
Only with Angular
Only with Vue

Q7. What is the Redux store?

A database
The single source of truth
A reducer
An action

Q8. What is middleware in Redux?

Functions intercepting actions
UI components
Actions creators
Reducers

Q9. What is time-travel debugging?

Logging tool
Debugging by moving through actions
State updater
Middleware

Q10. How to dispatch actions?

Using props
Using setState
Using dispatch method
Using hooks

💡 Bonus Insight

Redux's strict unidirectional data flow and centralized state help scale React applications by making state changes explicit and predictable, improving maintainability and debugging.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon