Getting Started with Redux

Last Updated : 24 Apr, 2025

Redux is a popular state management library for JavaScript applications. It provides a way to centralize the state of an application in a single store, making it easier to debug, test, and reason about the state changes in the application. It helps to manage complex application states, making it easier to handle data flow and interactions.

In this article, we'll go over the basics of Redux and explore how it simplifies state management.

The following fundamental concepts are discussed in this article:

Table of Content

What is Redux?

Redux is a state managing library used in JavaScript apps. It simply manages the state of your application or in other words, it is used to manage the data of the application. It is used with a library like React.

Setting Up Redux in a React App

Store Creation
Action Creation
Dispatching Actions
Reducer Functions
Combining Reducers
Connecting to React Component

1. Store Creation in Redux

To build a Redux store, developers use the redux library's createStore function and send in a root reducer as an argument. A root reducer is a collection of reducers that describe how the state in an application changes. Here's an illustration of a store built in Redux:

JavaScript

import { createStore } from 'redux';   import rootReducer from './reducers';  // Create the redux store by calling createStore  // and passing in the root reducer const store = createStore(rootReducer);

2. Action Creation in Redux

Redux actions are simple objects that explain changes to the state. Developers define an object with a type property and any other data required to describe the change to make an action. Here's an illustration of how to make an action in Redux:

JavaScript

// Define a action creator function that  // takes test as an argument and returns // an action object.  const addTodo = (text) => {     return {          // Describes the action to be taken         type: 'ADD_TODO',         text     }; };

3. Dispatching Actions in Redux

To dispatch an action and update the state, developers call the dispatch method on the store and pass in the action as an argument. Here is an example of dispatching an action in Redux:

JavaScript

// Dispatch the addTodo action by calling  // store.dispatch and passing in the action store.dispatch(addTodo('Learn Redux'));

4. Reducer Functions in Redux

Redux reducers are pure functions in Redux that accept the current state and an action and return the next state. Here's an example of a Redux reducer function:

JavaScript

// Define a reducer function that accepts the // current state and an action and return the // next state  const todoReducer = (state = [], action) => {      // To handle different action types     switch (action.type) {          // For the ADD_TODO action type         case 'ADD_TODO':             return [                  // Create a new array with the                  // existing todos                 ...state,                 {                     // Add a new todo with the text                     // from the action                     text: action.text,                      // Set the completed property                     // to false                     completed: false                 }             ];         default: // For any other action types             return state;     } };

5. Combining Reducers in Redux

If an application has multiple reducers, developers can use the redux library's combineReducers function to combine them into a single root reducer. Here's an example of how to combine reducers in Redux

JavaScript

// Combine multiple reducers into a single  // root reducer using combineReducers  import { combineReducers } from 'redux'; const rootReducer = combineReducers({     todos: todoReducer,     visibilityFilter: visibilityFilterReducer });

6. Connecting Components to Redux

Developers use the react-redux library's connect function to connect a Redux store to React components. Here's an example of a Redux store being linked to a React component:

JavaScript

// Connect a Redux store to a react component // using the connect    import { connect } from 'react-redux';  // Define functional components that accepts // todos as a prop const TodoList = ({ todos }) => (     <ul>         /* map over the todos array to render         each todo */         {todos.map((todo, index) => (             <li key={index}>{todo.text}</li>         ))}     </ul> ); const mapStateToProps = (state) => {     return {         // Specify which properties should          // be mapped to props         todos: state.todos     }; }; export default connect(mapStateToProps)(TodoList);

Output:

Getting Started with React

samarthshete14

Improve

Article Tags :

Getting Started with Redux

What is Redux?

Setting Up Redux in a React App

1. Store Creation in Redux

2. Action Creation in Redux

3. Dispatching Actions in Redux

4. Reducer Functions in Redux

5. Combining Reducers in Redux

6. Connecting Components to Redux

Similar Reads