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

getState() Returns the current state tree of your application. It is equal to the last value returned by the store's reducer. Returns (any): The current state tree of your application.

Writing Tests Because most of the Redux code you write are functions, and many of them are pure, they are easy to test without mocking. Setting Up We recommend Jest as the testing engine. Note that it runs in a Node environment, so you won't have access to the DOM. npm install --save-dev jest To use it together with Babel, you will need to install babel-jest: npm install --save-dev babel-jest and configure it to use ES2015 features in .babelrc: { "presets": ["es2015"] } Then, add this to scri

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

Basics Don't be fooled by all the fancy talk about reducers, middleware, store enhancers—Redux is incredibly simple. If you've ever built a Flux application, you will feel right at home. If you're new to Flux, it's easy too! In this guide, we'll walk through the process of creating a simple Todo app. Actions Reducers Store Data Flow Usage with React Example: Todo List

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

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

Reusing Reducer Logic As an application grows, common patterns in reducer logic will start to emerge. You may find several parts of your reducer logic doing the same kinds of work for different types of data, and want to reduce duplication by reusing the same common logic for each data type. Or, you may want to have multiple "instances" of a certain type of data being handled in the store. However, the global structure of a Redux store comes with some trade-offs: it makes it easy to track the o

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:

bindActionCreators(actionCreators, dispatch) Turns an object whose values are action creators, into an object with the same keys, but with every action creator wrapped into a dispatch call so they may be invoked directly. Normally you should just call dispatch directly on your Store instance. If you use Redux with React, react-redux will provide you with the dispatch function so you can call it directly, too. The only use case for bindActionCreators is when you want to pass some action creators