React With Redux | Understanding the Basics

Table of Contents

• What is Redux?
• Why Redux?
• Principles of Redux
• Pros and Cons of Redux
• Simple counter application with Redux

What is Redux?

Imagine you have a big box where you keep all the important information about your app, like the current user, their preferences, and what’s happening in the app at any given moment. This big box is your application’s state.

Now, sometimes different parts of your app need to know what’s in this big box or change something inside it. But you don’t want things to get messy with parts of your app randomly changing stuff in the big box without everyone knowing about it.

Redux is like a manager for this big box. It helps you keep track of what’s inside it and makes sure that any changes are done properly. Instead of each part of your app directly changing things in the big box, they ask the manager (Redux) to make changes for them.

So, Redux gives you a set of rules to follow. When something needs to change in the big box (like updating the current user or adding a new message), you first tell Redux about it. Redux then makes sure the change happens correctly and notifies all the parts of your app that care about it.

In simple terms, Redux helps you manage and control the important information in your app, making it easier to keep everything organized and working smoothly.

Why Redux?

In React, passing data between components can be messy, especially with lots of states to manage. Redux simplifies this by storing all the states in a central place called a “store.” This way, components can easily access the needed data from the store, making state management much simpler and organized.

Principles of Redux

1. Single Source of Truth: Redux promotes having a single, centralized store to contain the entire application state. This makes it easier to manage and update data consistently across the app.
2. State is Read-Only: In Redux, state is immutable, meaning it cannot be directly modified. Instead, changes are made by dispatching actions, which describe what happened in the application.
3. Changes are Made with Pure Functions: Redux reducers are pure functions that take the current state and an action, and return a new state. This ensures predictability and maintainability of state changes.
4. Unidirectional Data Flow: Data in Redux flows in one direction: from the store to the components. Actions are dispatched to modify the state, and changes are reflected in the components subscribed to the store.
5. Changes are Recorded: Redux keeps a record of all actions dispatched in the application’s history. This enables powerful debugging tools like time-travel debugging, allowing developers to replay actions and see how state evolves over time.

By adhering to these principles, Redux provides a structured and predictable way to manage application state, making it easier to develop and maintain complex applications.

Pros and Cons of Redux

Simple counter application with Redux

store.js

import { createStore } from 'redux';

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

// Create Redux store
const store = createStore(counterReducer);

export default store;

Counter.js

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

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

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);