React Redux Basics Every Front-End Developer Should Know

If you are learning React, you might hear about Redux. Redux is a popular tool that helps you manage the state in your React apps. But what exactly is it? And why should you care? Let’s break it down in simple words.

What is State in React?

In React, state means the data or information your app keeps track of. For example, if you have a button that counts how many times you click it, that number is part of the state.

React components can have their own state, but when your app gets bigger, managing state becomes harder. That’s where Redux helps.

What is Redux?

Redux is a state management library. It helps you keep your app’s state in one central place called the store. Instead of each component managing its own state, the store holds all the important data, and any component can use it.

Think of Redux as a big box where you store all your app’s data. When you want to change the data, you follow specific rules, so everything stays organized and predictable.

Main Concepts in Redux

Here are the basic parts you should know:

1. Store

The store holds the state of your whole app. There is usually just one store.

2. Actions

Actions are plain JavaScript objects that describe what happened.

const incrementAction = {
  type: 'INCREMENT'
};ty

3. Reducers

Reducers are functions that tell how to change the state based on the action. They take the current state and an action, and return a new state.

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

4. Dispatch

Dispatch is the way to send actions to the store.

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

How to Set Up Redux with React

First, install the packages:

npm install redux react-redux

Step 1: Create the Store

import { createStore } from 'redux';
const store = createStore(counterReducer);

Step 2: Provide the Store to React

Wrap your app with the Provider from react-redux:

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

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

Step 3: Use State and Dispatch in Components

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

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

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

export default Counter;

Why Should You Use Redux?

• Centralized state makes debugging easier.
• Helps when many components need the same data.
• Makes your app more predictable.
• Good for large or complex applications.

Here’s a starter app for you.

https://github.com/sangwin/react-starter-app

Summary

• React manages UI, but Redux manages the data.
• Redux uses store, actions, and reducers to update state.
• React-redux connects React and Redux.
• Using Redux makes big apps easier to manage.

Hope this helps.

Cheers!!

Sangwin Gawande

About me : https://sangw.in