general

Redux

Getting StartedTutorialAPIFAQBest PracticesGitHubNeed help?

🌜

🌞

Search

Redux

• Introduction

  • Getting Started with Redux

  • Installation

  • Core Concepts

  • Learning Resources

  • Ecosystem

  • Examples

• Tutorials

  • Tutorials Index

  • Quick Start

  • TypeScript Quick Start

  • Redux Essentials

    • Redux Overview and Concepts

    • Redux App Structure

    • Basic Redux Data Flow

    • Using Redux Data

    • Async Logic and Data Fetching

    • Performance and Normalizing Data

  • Redux Fundamentals

    • Redux Overview

    • Redux Concepts and Data Flow

    • State, Actions, and Reducers

    • Store

    • UI and React

    • Async Logic and Data Fetching

    • Standard Redux Patterns

    • Modern Redux with Redux Toolkit

• Recipes

  • Recipes: Index

  • Configuring Your Store

  • Usage With TypeScript

  • Migrating to Redux

  • Using Object Spread Operator

  • Reducing Boilerplate

  • Server Rendering

  • Writing Tests

  • Computing Derived Data

  • Implementing Undo History

  • Isolating Redux Sub-Apps

  • Code Splitting

  • Troubleshooting

  • Structuring Reducers

    • Structuring Reducers

    • Prerequisite Concepts

    • Basic Reducer Structure

    • Splitting Reducer Logic

    • Refactoring Reducers Example

    • Using combineReducers

    • Beyond combineReducers

    • Normalizing State Shape

    • Updating Normalized Data

    • Reusing Reducer Logic

    • Immutable Update Patterns

    • Initializing State

• Understanding Redux

  • Thinking in Redux

    • Motivation

    • Three Principles

    • Glossary

  • History and Design

    • Prior Art

    • Middleware

• FAQ

  • FAQ Index

  • General

  • Reducers

  • Organizing State

  • Store Setup

  • Actions

  • Immutable Data

  • Code Structure

  • Performance

  • Design Decisions

  • React Redux

  • Miscellaneous

• Style Guide

  • Style Guide: Best Practices

• API Reference

  • API Reference

  • createStore

  • Store

  • combineReducers

  • applyMiddleware

  • bindActionCreators

  • compose

• Redux Toolkit

  • Redux Toolkit: Overview

Redux FAQ: General#

When should I learn Redux?#

What to learn can be an overwhelming question for a JavaScript developer. It helps to narrow the range of options by learning one thing at a time and focusing on problems you find in your work. Redux is a pattern for managing application state. If you do not have problems with state management, you might find the benefits of Redux harder to understand. Some UI libraries (like React) have their own state management system. If you are using one of these libraries, especially if you are just learning to use them, we encourage you to learn the capabilities of that built-in system first. It might be all you need to build your application. If your application becomes so complex that you are confused about where state is stored or how state changes, then it is a good time to learn Redux.

tip

We recommend that most new learners should focus on learning React first, and wait to learn Redux until after you're already comfortable with React. That way, there's fewer new concepts to learn at once, and it's more clear what concepts are part of React and what concepts are part of Redux. You'll also have a better understanding of how using Redux fits into a React app, and why Redux can be useful.

Further information#

Articles

• Deciding What Not To Learn

• How to learn web frameworks

• Redux vs MobX vs Flux vs... Do you even need that?

Discussions

• Ask HN: Overwhelmed with learning front-end, how do I proceed?

• Twitter: If you want to teach someone to use an abstraction...

• Twitter: it was never intended to be learned before...

• Twitter: Learning Redux before React?

• Twitter: The first time I used React, people told me I needed Redux...

• Twitter: This was my experience with Redux...

• Dev.to: When is it time to use Redux?

When should I use Redux?#

Not all apps need Redux. It's important to understand the kind of application you're building, the kinds of problems that you need to solve, and what tools can best solve the problems you're facing.

Redux helps you deal with shared state management, but like any tool, it has tradeoffs. It's not designed to be the shortest or fastest way to write code. It's intended to help answer the question "When did a certain slice of state change, and where did the data come from?", with predictable behavior. There are more concepts to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain restrictions. It's a trade-off between short term and long term productivity.

As Pete Hunt, one of the early contributors to React, says:

You'll know when you need Flux. If you aren't sure if you need it, you don't need it.

Similarly, Dan Abramov, one of the creators of Redux, says:

I would like to amend this: don't use Redux until you have problems with vanilla React.

Redux is most useful when in cases when:

• You have large amounts of application state that are needed in many places in the app

• The app state is updated frequently

• The logic to update that state may be complex

• The app has a medium or large-sized codebase, and might be worked on by many people

• You need to see how that state is being updated over time

There are also many other tools available that can help solve some of the same problems Redux does: state management, caching fetched server data, and passing data through the UI.

info

If you're not sure whether Redux is a good choice for your app, these resources give some more guidance:

• When (and when not) to reach for Redux

• The Tao of Redux, Part 1 - Implementation and Intent

• You Might Not Need Redux

In the end, Redux is just a tool. It's a great tool, and there are some great reasons to use it, but there are also reasons you might not want to use it. Make informed decisions about your tools, and understand the tradeoffs involved in each decision.

Further information#

Documentation

• Thinking in Redux: Motivation

Articles

• When (and when not) to reach for Redux

• The Tao of Redux, Part 1 - Implementation and Intent

• You Might Not Need Redux

• The Case for Flux

Discussions

• Twitter: Don't use Redux until...

• Twitter: Redux is designed to be predictable, not concise

• Twitter: Redux is useful to eliminate deep prop passing

• Twitter: Don't use Redux unless you're unhappy with local component state

• Twitter: You don't need Redux if your data never changes

• Twitter: If your reducer looks boring, don't use redux

• Reddit: You don't need Redux if your app just fetches something on a single page

• Stack Overflow: Why use Redux over Facebook Flux?

• Stack Overflow: Why should I use Redux in this example?

• Stack Overflow: What could be the downsides of using Redux instead of Flux?

• Stack Overflow: When should I add Redux to a React app?

• Stack Overflow: Redux vs plain React?

• Twitter: Redux is a platform for developers to build customized state management with reusable things

Can Redux only be used with React?#

Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code. That said, it is most useful when combined with a declarative view implementation that can infer the UI updates from the state changes, such as React or one of the similar libraries available.

Do I need to have a particular build tool to use Redux?#

Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all. The counter-vanilla example demonstrates basic ES5 usage with Redux included as a <script> tag. As the relevant pull request says:

The new Counter Vanilla example is aimed to dispel the myth that Redux requires Webpack, React, hot reloading, sagas, action creators, constants, Babel, npm, CSS modules, decorators, fluent Latin, an Egghead subscription, a PhD, or an Exceeds Expectations O.W.L. level.

Nope, it's just HTML, some artisanal <script> tags, and plain old DOM manipulation. Enjoy!

Previous

« FAQ Index

Next

Reducers »

• When should I learn Redux?

• When should I use Redux?

• Can Redux only be used with React?

• Do I need to have a particular build tool to use Redux?

Docs

• Getting Started

• Tutorial

• FAQ

• API Reference

Community

• Reactiflux Discord

• Stack Overflow

• Feedback

More

• GitHub

• 

Copyright © 2015–2021 Dan Abramov and the Redux documentation authors.