Redux FAQ: React Redux Table of Contents Why isn't my component re-rendering, or my mapStateToProps running? Why is my component re-rendering too often? How can I speed up my mapStateToProps? Why don't I have this.props.dispatch available in my connected component? Should I only connect my top component, or can I connect multiple components in my tree? React Redux Why isn't my component re-rendering, or my mapStateToProps running? Accidentally mutating or modifying your state direct

Redux FAQ: Performance Table of Contents How well does Redux “scale” in terms of performance and architecture? Won't calling “all my reducers” for each action be slow? Do I have to deep-clone my state in a reducer? Isn't copying my state going to be slow? How can I reduce the number of store update events? Will having “one state tree” cause memory problems? Will dispatching many actions take up memory? Performance How well does Redux “scale” in terms of performance and architecture?

Redux FAQ: Organizing State Table of Contents Do I have to put all my state into Redux? Should I ever use React's setState()? Can I put functions, promises, or other non-serializable items in my store state? How do I organize nested or duplicate data in my state? Organizing State Do I have to put all my state into Redux? Should I ever use React's setState()? There is no “right” answer for this. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializab

Redux FAQ: Miscellaneous Table of Contents Are there any larger, “real” Redux projects? How can I implement authentication in Redux? Miscellaneous Are there any larger, “real” Redux projects? Yes, lots of them! To name just a few: Twitter's mobile site Wordpress's new admin page Firefox's new debugger Mozilla's experimental browser testbed The HyperTerm terminal application And many, many more! The Redux Addons Catalog has a list of Redux-based applications and examples that p

Redux FAQ: General Table of Contents When should I use Redux? Can Redux only be used with React? Do I need to have a particular build tool to use Redux? General When should I use Redux? 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. In general, us

Redux FAQ: Code Structure Table of Contents What should my file structure look like? How should I group my action creators and reducers in my project? Where should my selectors go? How should I split my logic between reducers and action creators? Where should my “business logic” go? Code Structure What should my file structure look like? How should I group my action creators and reducers in my project? Where should my selectors go? Since Redux is just a data store library, it has no direc

Redux FAQ: Actions Table of Contents Why should type be a string, or at least serializable? Why should my action types be constants? Is there always a one-to-one mapping between reducers and actions? How can I represent “side effects” such as AJAX calls? Why do we need things like “action creators”, “thunks”, and “middleware” to do async behavior? Should I dispatch multiple actions in a row from one action creator? Actions Why should type be a string, or at least serializable? Why sho

Redux FAQ Table of Contents General When should I use Redux? Can Redux only be used with React? Do I need to have a particular build tool to use Redux? Reducers How do I share state between two reducers? Do I have to use combineReducers? Do I have to use the switch statement to handle actions? Organizing State Do I have to put all my state into Redux? Should I ever use React's setState()? Can I put functions, promises, or other non-serializable items in my store state? How d

Reducing Boilerplate Redux is in part inspired by Flux, and the most common complaint about Flux is how it makes you write a lot of boilerplate. In this recipe, we will consider how Redux lets us choose how verbose we'd like our code to be, depending on personal style, team preferences, longer term maintainability, and so on. Actions Actions are plain objects describing what happened in the app, and serve as the sole way to describe an intention to mutate the data. It's important that actions b

Reducers Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of a reducer. Designing the State Shape In Redux, all application state is stored as a single object. It's a good idea to think of its shape before writing any code. What's the minimal representation of your app's state as an object? For our todo app, we want to store two different things: The currently selected visibility filter; The actual list of tod