Skip to content

What is Redux?

Redux is a JavaScript library for managing state that many parts of an app need, like a shopping cart or the signed-in user. It keeps that state in one store. Components read from the store and send it actions, plain objects that describe what happened, and reducer functions decide how the state changes in response. Dan Abramov and Andrew Clark created Redux in 2015, and Redux Toolkit is now the official way to write Redux code.

Redux Toolkit's createSlice groups a piece of state with the reducers that update it:

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

const cartSlice = createSlice({
  name: 'cart',
  initialState: [],
  reducers: {
    itemAdded(state, action) {
      state.push(action.payload);
    },
  },
});

Redux Toolkit uses a library called Immer, so that push becomes an immutable update, and it generates an itemAdded action creator for you.

Why learn Redux?

Every state change in Redux is an action you can log, and the Redux DevTools browser extension lets you step back through them, so "why did the cart empty?" becomes something you can trace. Writing reducers also builds habits, like immutable updates, that carry over to React's own useReducer.

Not every app needs Redux, and its docs say so, suggesting it when lots of state is used in many places and changes often. For a small project, React's built-in state and context can be enough. If most of your state is server data, RTK Query, which ships with Redux Toolkit, handles fetching and caching for you.

Practice Redux on Frontend Mentor

Redux fits any Frontend Mentor challenge where state starts spreading across components, since the stack is always yours to choose. In these six, that happens early.

In Product list with cart, the cart's contents appear in the product cards, the cart panel and the order confirmation modal, so one cart slice keeps all three in agreement. Crowdfunding product page updates the total raised, the backer count and the progress bar from a single pledge action. Kanban task management web app has boards, columns, tasks and subtasks that several screens edit, a real test of how you split state into slices.

Start building free

Take your Redux skills further

Want a more structured approach? This learning path takes you through its challenges in order, from first principles to real-world projects.

advanced

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you reinforce knowledge and gain hands-on experience with your chosen framework.

Challenges to practice Redux with

Every challenge works with any tech stack. These are good ones to build with Redux, from easiest to hardest.

  • Free

    Product list with cart

    • HTML
    • CSS
    • JS
    junior

    Practice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.

  • Free

    Crowdfunding product page

    • HTML
    • CSS
    • JS
    junior

    This challenge will test both your layout and state management skills. As visitors make pledges, your goal is to keep track of the changes.

  • Free

    Todo app

    • HTML
    • CSS
    • JS
    intermediate

    The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

  • Premium

    Entertainment web app

    • HTML
    • CSS
    • JS
    advanced

    This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.

  • Premium

    Personal finance app

    • HTML
    • CSS
    • JS
    guru

    This app contains 5 pages (Overview, Transactions, Budgets, Pots, and Recurring Bills) and includes a lot of tricky elements. You can also build it as a full-stack app!

  • Premium

    Kanban task management web app

    • HTML
    • CSS
    • JS
    guru

    In this project, you'll build a fully-functional task management app with a light/dark mode toggle. We provide a JSON file, so you can practice working with JSON data.

View more challenges

Solutions made with Redux

View more solutions

Related technologies

  • What is React?

    React is a JavaScript library, created at Facebook, for building user interfaces from components. You write them in JSX, and React keeps the page in sync.

  • What is Next.js?

    Next.js is a React framework for full-stack web apps. Its App Router turns folders into routes and renders pages as React Server Components by default.

  • What is TypeScript?

    TypeScript is JavaScript with syntax for types, made by Microsoft. It checks your code before it runs and compiles to plain JavaScript for any browser.

Join 1,205,040 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in