Skip to content
TagsRedux

What is Redux?

Redux is a state management library most commonly used with React. It gives your app a single, centralised place to store data, called a "store," so that any component can access what it needs without relying on a long chain of props being passed down through the component tree.

Redux was created in 2015 and remains one of the most widely used state management solutions in the React ecosystem. Learning it opens the door to building more complex, real-world applications with confidence.

Why learn Redux?

Learning Redux teaches you important programming concepts like immutability, predictable data flow, and separation of concerns. These ideas show up across many languages and frameworks, so the skills you pick up transfer well.

State management is one of the tricker parts of building modern web apps, and Redux has been one of the most popular tools for handling it. Knowing Redux is a great skill to have as a developer since many companies rely on Redux in production.

Practice Redux on Frontend Mentor

Reading articles or watching videos to learn about Redux is useful, but actually using it in a project is where the learning often clicks. This is exactly what Frontend Mentor was built for.

Frontend Mentor gives you professionally designed projects to build from scratch, which makes it a great place to practice Redux in a realistic setting. You can start with simpler challenges to get comfortable with React, then work up to more complex multi-page apps where managing state with Redux starts to make a real difference.

Recommended Redux challenges

Hand-picked challenges to help you practice Redux at every skill level.

  • 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

    Interactive comments section

    • HTML
    • CSS
    • JS
    intermediate

    This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!

  • 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

    Bookmark manager app

    • HTML
    • CSS
    • JS
    advanced

    Build a fully-functional bookmark manager with add, edit, archive, search, and filter features. Perfect for practicing forms and state management.

  • Premium

    Note-taking web app

    • HTML
    • CSS
    • JS
    advanced

    This project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!

  • Free

    REST Countries API with color theme switcher

    • HTML
    • CSS
    • JS
    • API
    advanced

    If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.

  • 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

    Invoice app

    • HTML
    • CSS
    • JS
    guru

    This invoicing app project will test you on many levels. You'll be working with JSON data, managing state, plus a lot more. You can even build it out as a full-stack app!

  • 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!

View more challenges

Solutions made with Redux

View more solutions

Take your Redux skills further

Want a more structured approach? This learning path guides you through curated Redux challenges—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.

Related tags

  • #react

    React is a popular JavaScript library for building user interfaces. It is efficient and declarative, using a virtual DOM to optimize updates to the UI. React is often used with other libraries or frameworks.

  • #next

    Next.js is a framework for building server-rendered or statically exported React applications with automatic code splitting, optimized performance, and easy deployment.

  • #typescript

    TypeScript is a statically-typed superset of JavaScript that adds optional type annotations, enabling more robust code analysis and error detection. It enhances development experience with better tooling, autocompletion, and refactoring, and compiles to standard JavaScript for browser compatibility.

  • #vue

    Vue.js is a progressive, reactive JavaScript framework for building web applications. Its adaptable architecture enables seamless integration with other libraries or existing projects, while its core library focuses on the view layer, making it easy to learn and use for a variety of applications.

Join 1,147,280 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