Redux Basics

Redux is a predictable state management library commonly used with React to manage application-wide state in a centralized store.

It helps solve problems related to prop drilling and complex state sharing between multiple components.

What is Redux?

Redux is a state container for JavaScript applications that stores the entire application state in a single immutable object called the store.

It follows a strict unidirectional data flow, making state changes predictable and easier to debug.

Why Use Redux?

As applications grow, managing state with only React's useState and useContext can become complex.

Redux provides a centralized place to manage shared state across the entire application.

Core Principles of Redux

Redux is built on three core principles: single source of truth, state is read-only, and changes are made using pure functions.

These principles ensure consistency and predictability in state management.

Store

The store is a JavaScript object that holds the entire application state.

It provides methods to access state, dispatch actions, and subscribe to changes.

import { createStore } from 'redux';

const store = createStore(reducer);

Actions

Actions are plain JavaScript objects that describe what happened in the application.

Each action must have a type property and can optionally include a payload.

const INCREMENT = 'INCREMENT';

const incrementAction = {
  type: INCREMENT
};

Reducers

Reducers are pure functions that take the current state and an action, then return a new state.

They define how the state should change based on actions.

const initialState = { count: 0 };

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

Dispatching Actions

The dispatch function is used to send actions to the store.

When an action is dispatched, the reducer updates the state accordingly.

store.dispatch({ type: 'INCREMENT' });

Getting State

You can access the current state using store.getState().

console.log(store.getState());

Redux Data Flow

Redux follows a strict unidirectional data flow: UI dispatches action → reducer updates state → store updates UI.

This predictable flow makes debugging and testing easier.

Connecting Redux with React

In React, Redux is commonly integrated using the react-redux library.

The Provider component makes the store available to all components.

import { Provider } from 'react-redux';

<Provider store={store}>
  <App />
</Provider>

Using Redux in Components

React components use hooks like useSelector and useDispatch to interact with the Redux store.

import { useSelector, useDispatch } from 'react-redux';

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

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Count: {count}
    </button>
  );
}

When to Use Redux

Redux is best suited for large applications with complex state sharing requirements.

For small apps, React's built-in state management may be sufficient.

Best Practices

Keep reducers pure and avoid side effects inside them.

Structure actions and state logically for better scalability.

Summary

Redux provides a centralized and predictable way to manage application state.

Understanding actions, reducers, and store is essential for mastering Redux.