dispatch(action) Dispatches an action. This is the only way to trigger a state change. The store's reducing function will be called with the current getState() result and the given action synchronously. Its return value will be considered the next state. It will be returned from getState() from now on, and the change listeners will immediately be notified. A Note for Flux Users If you attempt to call dispatch from inside the reducer, it will throw with an error saying “Reducers may not dispa

Reducers Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of a reducer. Designing the State Shape In Redux, all application state is stored as a single object. It's a good idea to think of its shape before writing any code. What's the minimal representation of your app's state as an object? For our todo app, we want to store two different things: The currently selected visibility filter; The actual list of tod

Redux FAQ: React Redux Table of Contents Why isn't my component re-rendering, or my mapStateToProps running? Why is my component re-rendering too often? How can I speed up my mapStateToProps? Why don't I have this.props.dispatch available in my connected component? Should I only connect my top component, or can I connect multiple components in my tree? React Redux Why isn't my component re-rendering, or my mapStateToProps running? Accidentally mutating or modifying your state direct

Middleware You've seen middleware in action in the Async Actions example. If you've used server-side libraries like Express and Koa, you were also probably already familiar with the concept of middleware. In these frameworks, middleware is some code you can put between the framework receiving a request, and the framework generating a response. For example, Express or Koa middleware may add CORS headers, logging, compression, and more. The best feature of middleware is that it's composable in a

Store A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's just an object with a few methods on it. To create it, pass your root reducing function to createStore. A Note for Flux Users If you're coming from Flux, there is a single important difference you need to understand. Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root re

Prior Art Redux has a mixed heritage. It is similar to some patterns and technologies, but is also different from them in important ways. We'll explore some of the similarities and the differences below. Flux Can Redux be considered a Flux implementation? Yes, and no. (Don't worry, Flux creators approve of it, if that's all you wanted to know.) Redux was inspired by several important qualities of Flux. Like Flux, Redux prescribes that you concentrate your model update logic in a certain layer o

Redux FAQ: General Table of Contents When should I use Redux? Can Redux only be used with React? Do I need to have a particular build tool to use Redux? General When should I use Redux? Pete Hunt, one of the early contributors to React, says: You'll know when you need Flux. If you aren't sure if you need it, you don't need it. Similarly, Dan Abramov, one of the creators of Redux, says: I would like to amend this: don't use Redux until you have problems with vanilla React. In general, us

Redux FAQ: Organizing State Table of Contents Do I have to put all my state into Redux? Should I ever use React's setState()? Can I put functions, promises, or other non-serializable items in my store state? How do I organize nested or duplicate data in my state? Organizing State Do I have to put all my state into Redux? Should I ever use React's setState()? There is no “right” answer for this. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializab

Splitting Up Reducer Logic For any meaningful application, putting all your update logic into a single reducer function is quickly going to become unmaintainable. While there's no single rule for how long a function should be, it's generally agreed that functions should be relatively short and ideally only do one specific thing. Because of this, it's good programming practice to take pieces of code that are very long or do many different things, and break them into smaller pieces that are easie

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