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

Migrating to Redux Redux is not a monolithic framework, but a set of contracts and a few functions that make them work together. The majority of your “Redux code” will not even use Redux APIs, as most of the time you'll be writing functions. This makes it easy to migrate both to and from Redux. We don't want to lock you in! From Flux Reducers capture “the essence” of Flux Stores, so it's possible to gradually migrate an existing Flux project towards Redux, whether you are using Flummox, Alt, tr

Recipes These are some use cases and code snippets to get you started with Redux in a real app. They assume you understand the topics in basic and advanced tutorials. Migrating to Redux Using Object Spread Operator Reducing Boilerplate Server Rendering Writing Tests Computing Derived Data Implementing Undo History Isolating Subapps

Prerequisite Reducer Concepts As described in Reducers, a Redux reducer function: Should have a signature of (previousState, action) => newState, similar to the type of function you would pass to Array.prototype.reduce(reducer, ?initialValue) Should be "pure", which means it does not mutate its arguments, perform side effects like API calls or modifying values outside of the function, or call non-pure functions like Date.now() or Math.random(). This also means that updates should be done in

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

Redux FAQ: Store Setup Table of Contents Can or should I create multiple stores? Can I import my store directly, and use it in components myself? Is it OK to have more than one middleware chain in my store enhancer? What is the difference between next and dispatch in a middleware function? How do I subscribe to only a portion of the state? Can I get the dispatched action as part of the subscription? Store Setup Can or should I create multiple stores? Can I import my store directly, and

combineReducers(reducers) As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state. The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore. The resulting reducer calls every child reducer, and gathers their results into a single state object. The shape of the state object matches the keys of the passed red

createStore(reducer, [preloadedState], [enhancer]) Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app. Arguments reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle. [preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you pro

Example: Todo List This is the complete source code of the tiny todo app we built during the basics tutorial. Entry Point index.js import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers' import App from './components/App' let store = createStore(todoApp) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) Action Creato

Managing Normalized Data As mentioned in Normalizing State Shape, the Normalizr library is frequently used to transform nested response data into a normalized shape suitable for integration into the store. However, that doesn't address the issue of executing further updates to that normalized data as it's being used elsewhere in the application. There are a variety of different approaches that you can use, based on your own preference. We'll use the example of adding a new Comment to a Post. St