Store A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's just an object with a few methods on it. To create it, pass your root reducing function to createStore. A Note for Flux Users If you're coming from Flux, there is a single important difference you need to understand. Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root re

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: 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

Implementing Undo History Building an Undo and Redo functionality into an app has traditionally required conscious effort from the developer. It is not an easy problem with classical MVC frameworks because you need to keep track of every past state by cloning all relevant models. In addition, you need to be mindful of the undo stack because the user-initiated changes should be undoable. This means that implementing Undo and Redo in an MVC application usually forces you to rewrite parts of your

API Reference The Redux API surface is tiny. Redux defines a set of contracts for you to implement (such as reducers) and provides a few helper functions to tie these contracts together. This section documents the complete Redux API. Keep in mind that Redux is only concerned with managing the state. In a real app, you'll also want to use UI bindings like react-redux. Top-Level Exports createStore(reducer, [preloadedState], [enhancer]) combineReducers(reducers) applyMiddleware(...middleware

Refactoring Reducer Logic Using Functional Decomposition and Reducer Composition It may be helpful to see examples of what the different types of sub-reducer functions look like and how they fit together. Let's look at a demonstration of how a large single reducer function can be refactored into a composition of several smaller functions. Note: this example is deliberately written in a verbose style in order to illustrate the concepts and the process of refactoring, rather than perfectly concis

Beyond combineReducers The combineReducers utility included with Redux is very useful, but is deliberately limited to handle a single common use case: updating a state tree that is a plain Javascript object, by delegating the work of updating each slice of state to a specific slice reducer. It does not handle other use cases, such as a state tree made up of Immutable.js Maps, trying to pass other portions of the state tree as an additional argument to a slice reducer, or performing "ordering" o

Three Principles Redux can be described in three fundamental principles: Single source of truth The state of your whole application is stored in an object tree within a single store. This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or introspect an application; it also enables you to persist your app's state in development, for a faster developm

Basic Reducer Structure and State Shape Basic Reducer Structure First and foremost, it's important to understand that your entire application really only has one single reducer function: the function that you've passed into createStore as the first argument. That one single reducer function ultimately needs to do several things: The first time the reducer is called, the state value will be undefined. The reducer needs to handle this case by supplying a default state value before handling the in

Using Object Spread Operator Since one of the core tenets of Redux is to never mutate state, you'll often find yourself using Object.assign() to create copies of objects with new or updated values. For example, in the todoApp below Object.assign() is used to return a new state object with an updated visibilityFilter property: function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: