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

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:

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

Usage with React Router So you want to do routing with your Redux app. You can use it with React Router. Redux will be the source of truth for your data and React Router will be the source of truth for your URL. In most of the cases, it is fine to have them separate unless if you need to time travel and rewind actions that triggers the change URL. Installing React Router react-router is available on npm . This guides assumes you are using react-router@^2.7.0. npm install --save react-router Con

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

Glossary This is a glossary of the core terms in Redux, along with their type signatures. The types are documented using Flow notation. State type State = any State (also called the state tree) is a broad term, but in the Redux API it usually refers to the single state value that is managed by the store and returned by getState(). It represents the entire state of a Redux application, which is often a deeply nested object. By convention, the top-level state is an object or some other key-value

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

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