Isolating Redux Sub-Apps Consider the case of a “big” app (contained in a <BigApp> component) that embeds smaller “sub-apps” (contained in <SubApp> components): import React, { Component } from 'react' import SubApp from './subapp' class BigApp extends Component { render() { return ( <div> <SubApp /> <SubApp /> <SubApp /> </div> ) } } These <SubApp>s will be completely independent. They won't share

Introduction Motivation Three Principles Prior Art Ecosystem Examples

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

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

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

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

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

Computing Derived Data Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store. Motivation for Memoized Selectors Let's revisit the Todos List example: containers/VisibleTodoList.js import { connect } from 'react-redux' import { toggleTodo } from '../actions' import TodoList from '../components/TodoList' const getVisibleTodos = (todos, filter) => { switch (filter) { case

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