Redux FAQ Table of Contents General When should I use Redux? Can Redux only be used with React? Do I need to have a particular build tool to use Redux? Reducers How do I share state between two reducers? Do I have to use combineReducers? Do I have to use the switch statement to handle actions? Organizing State 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 d

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

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

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

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

Using combineReducers Core Concepts The most common state shape for a Redux app is a plain Javascript object containing "slices" of domain-specific data at each top-level key. Similarly, the most common approach to writing reducer logic for that state shape is to have "slice reducer" functions, each with the same (state, action) signature, and each responsible for managing all updates to that specific slice of state. Multiple slice reducers can respond to the same action, independently update t

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: 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

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