combineReducers(reducers) As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state. The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore. The resulting reducer calls every child reducer, and gathers their results into a single state object. The shape of the state object matches the keys of the passed red

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

Store In the previous sections, we defined the actions that represent the facts about “what happened” and the reducers that update the state according to those actions. The Store is the object that brings them together. The store has the following responsibilities: Holds application state; Allows access to state via getState(); Allows state to be updated via dispatch(action); Registers listeners via subscribe(listener); Handles unregistering of listeners via the function returned by subscri

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

Usage with React From the very beginning, we need to stress that Redux has no relation to React. You can write Redux apps with React, Angular, Ember, jQuery, or vanilla JavaScript. That said, Redux works especially well with libraries like React and Deku because they let you describe UI as a function of state, and Redux emits state updates in response to actions. We will use React to build our simple todo app. Installing React Redux React bindings are not included in Redux by default. You need

Troubleshooting This is a place to share common problems and solutions to them. The examples use React, but you should still find them useful if you use something else. Nothing happens when I dispatch an action Sometimes, you are trying to dispatch an action, but your view does not update. Why does this happen? There may be several reasons for this. Never mutate reducer arguments It is tempting to modify the state or action passed to you by Redux. Don't do this! Redux assumes that you never mut

Async Actions In the basics guide, we built a simple todo application. It was fully synchronous. Every time an action was dispatched, the state was updated immediately. In this guide, we will build a different, asynchronous application. It will use the Reddit API to show the current headlines for a selected subreddit. How does asynchronicity fit into Redux flow? Actions When you call an asynchronous API, there are two crucial moments in time: the moment you start the call, and the moment when y

Async Flow Without middleware, Redux store only supports synchronous data flow. This is what you get by default with createStore(). You may enhance createStore() with applyMiddleware(). It is not required, but it lets you express asynchronous actions in a convenient way. Asynchronous middleware like redux-thunk or redux-promise wraps the store's dispatch() method and allows you to dispatch something other than actions, for example, functions or Promises. Any middleware you use can then interpre

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