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

compose(...functions) Composes functions from right to left. This is a functional programming utility, and is included in Redux as a convenience. You might want to use it to apply several store enhancers in a row. Arguments (arguments): The functions to compose. Each function is expected to accept a single parameter. Its return value will be provided as an argument to the function standing to the left, and so on. The exception is the right-most argument which can accept multiple parameters, as

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

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

Beyond combineReducers The combineReducers utility included with Redux is very useful, but is deliberately limited to handle a single common use case: updating a state tree that is a plain Javascript object, by delegating the work of updating each slice of state to a specific slice reducer. It does not handle other use cases, such as a state tree made up of Immutable.js Maps, trying to pass other portions of the state tree as an additional argument to a slice reducer, or performing "ordering" o

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

Basic Reducer Structure and State Shape Basic Reducer Structure First and foremost, it's important to understand that your entire application really only has one single reducer function: the function that you've passed into createStore as the first argument. That one single reducer function ultimately needs to do several things: The first time the reducer is called, the state value will be undefined. The reducer needs to handle this case by supplying a default state value before handling the in

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

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

applyMiddleware(...middlewares) Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain. The most common use case for middleware is to support asynchronous actions without much boilerplate code or a dependency on a