Initializing State There are two main ways to initialize state for your application. The createStore method can accept an optional preloadedState value is its second argument. Reducers can also specify an initial value by looking for an incoming state argument that is undefined, and returning the value they'd like to use as a default. This can either be done with an explicit check inside the reducer, or by using the ES6 default argument value syntax: function myReducer(state = someDefaultValue,

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

Immutable Update Patterns The articles listed in Prerequisite Concepts#Immutable Data Management give a number of good examples for how to perform basic update operations immutably, such as updating a field in an object or adding an item to the end of an array. However, reducers will often need to use those basic operations in combination to perform more complicated tasks. Here are some examples for some of the more common tasks you might have to implement. Updating Nested Objects The key to up

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

Examples Redux is distributed with a few examples in its source code. Counter Vanilla Run the Counter Vanilla example: git clone https://github.com/reactjs/redux.git cd redux/examples/counter-vanilla open index.html It does not require a build system or a view framework and exists to show the raw Redux API used with ES5. Counter Run the Counter example: git clone https://github.com/reactjs/redux.git cd redux/examples/counter npm install npm start open http://localhost:3000/ This is the most

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

Example: Reddit API This is the complete source code of the Reddit headline fetching example we built during the advanced tutorial. Entry Point index.js import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' import Root from './containers/Root' render( <Root />, document.getElementById('root') ) Action Creators and Constants actions.js import fetch from 'isomorphic-fetch' export const REQUEST_POSTS = 'REQUEST_POSTS' export const RECEIVE_POSTS = 'RECEIV

Ecosystem Redux is a tiny library, but its contracts and APIs are carefully chosen to spawn an ecosystem of tools and extensions. For an extensive list of everything related to Redux, we recommend Awesome Redux. It contains examples, boilerplates, middleware, utility libraries, and more. React/Redux Links contains tutorials and other useful resources for anyone learning React or Redux, and Redux Ecosystem Links lists many Redux-related libraries and addons. On this page we will only feature a f

Data Flow Redux architecture revolves around a strict unidirectional data flow. This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another. If you're still not convinced, read Motivation and The Case for Flux for a compelling argument in favor of unidirectiona

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