Redux Tutorial for Beginners: Simple Guide to Learn Redux

Welcome to this Redux tutorial for beginners! If you’re new to Redux and want to learn how to manage state in JavaScript apps, especially with React, you’re in the right place. This guide simplifies Redux concepts like the store, actions, and reducers, making it easy for beginners to understand. By the end, you’ll build a basic counter app using Redux and React.

What is Redux?

Redux is a predictable state container for JavaScript applications, commonly used with React to manage global state. It centralizes your app’s state in a single store, making it easier to track, update, and debug. According to the official Redux documentation, it helps write apps that behave consistently across different environments.

In this Redux tutorial for beginners, we’ll break down Redux into simple terms and show you how it works with practical examples.

Why Use Redux? A Redux Tutorial for Beginners

Redux solves state management challenges in large applications. Here’s why beginners should learn Redux:

• Centralized State: Store all app data in one place, accessible by any component.
• Predictable Updates: State changes are handled by pure functions called reducers, ensuring consistency.
• Debugging Ease: Tools like Redux DevTools allow “time-travel debugging” to inspect state changes.
• Scalability: Ideal for complex apps with many components sharing state.

For example, in a React app, passing state through props can lead to prop drilling. Redux eliminates this by providing a global store.

Core Redux Concepts

To master Redux, you need to understand three key concepts:

1. Store: A single JavaScript object holding the app’s state. Created using createStore from Redux.
2. Actions: Plain objects describing “what happened” (e.g., { type: 'INCREMENT' }).
3. Reducers: Pure functions that take the current state and an action, returning a new state.

Here’s a simple reducer example:

const initialState = { count: 0 };

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

This code updates the count based on the action type.

Setting Up Redux with React

Let’s set up Redux in a React app using Redux Toolkit, the recommended way to write Redux logic.

Step 1: Install Dependencies

Create a React project using Create React App and install Redux Toolkit and React-Redux:

npx create-react-app redux-demo
cd redux-demo
npm install @reduxjs/toolkit react-redux

Step 2: Create the Store

In src/app/store.js, configure the store:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Step 3: Connect Store to React

Wrap your app with the Redux Provider in src/index.js:

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

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

Step 4: Create a Slice

In src/features/counter/counterSlice.js, define a Redux slice:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Building a Counter App

Let’s build a simple counter app to apply what you’ve learned in this Redux tutorial for beginners.

Step 1: Create the Counter Component

In src/features/counter/Counter.js, create a component:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

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

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

export default Counter;

Step 2: Add to App

In src/App.js, include the Counter component:

import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div>
      <h1>Redux Tutorial for Beginners</h1>
      <Counter />
    </div>
  );
}

export default App;

Run npm start to see the counter app in action. Click the buttons to increment or decrement the count, managed by Redux!

Common Redux FAQs

What is Redux for beginners?

Redux is a library for managing global state in JavaScript apps, making it easier to share data across components, especially in React.

How to use Redux with React?

Use Redux Toolkit to create a store, define slices for state logic, and connect components using useSelector and useDispatch from React-Redux.

Is Redux necessary for React?

No, but it’s useful for large apps with complex state management needs. For simpler apps, React’s useState or Context API may suffice.

Conclusion

This Redux tutorial for beginners has covered the essentials of Redux, from core concepts to building a counter app with React. Redux simplifies state management, making your apps predictable and scalable. Try building your own Redux app, and check out our React tutorial for beginners for more learning. Have questions? Leave a comment below!