Redux in Russian
  • Read Me
  • Introduction
    • Motivation
    • Core Concepts
    • Three Principles
    • Prior Art
    • Learning Resources
    • Ecosystem
    • Examples
  • Basics
    • Actions
    • Reducers
    • Store
    • Data Flow
    • Usage with React
    • Example: Todo List
  • Advanced
    • Async Actions
    • Async Flow
    • Middleware
    • Usage with React Router
    • Example: Reddit API
    • Next Steps
  • Recipes
    • Configuring Your Store
    • Migrating to Redux
    • Using Object Spread Operator
    • Reducing Boilerplate
    • Server Rendering
    • Writing Tests
    • Computing Derived Data
    • Implementing Undo History
    • Isolating Subapps
    • Structuring Reducers
      • Prerequisite Concepts
      • Basic Reducer Structure
      • Splitting Reducer Logic
      • Refactoring Reducers Example
      • Using combineReducers
      • Beyond combineReducers
      • Normalizing State Shape
      • Updating Normalized Data
      • Reusing Reducer Logic
      • Immutable Update Patterns
      • Initializing State
    • Using Immutable.JS with Redux
  • FAQ
    • General
    • Reducers
    • Organizing State
    • Store Setup
    • Actions
    • Immutable Data
    • Code Structure
    • Performance
    • Design Decisions
    • React Redux
    • Miscellaneous
  • Troubleshooting
  • Glossary
  • API Reference
    • createStore
    • Store
    • combineReducers
    • applyMiddleware
    • bindActionCreators
    • compose
  • Change Log
  • Patrons
  • Feedback
Powered by GitBook
On this page
  1. Basics

Data Flow

PreviousStoreNextUsage with React

Last updated 6 years ago

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 and for a compelling argument in favor of unidirectional data flow. Although , it shares the same key benefits.

The data lifecycle in any Redux app follows these 4 steps:

  1. You call .

    An is a plain object describing what happened. For example:

     { type: 'LIKE_ARTICLE', articleId: 42 }
     { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
     { type: 'ADD_TODO', text: 'Read the Redux docs.' }

    Think of an action as a very brief snippet of news. “Mary liked article 42.” or “‘Read the Redux docs.' was added to the list of todos.”

    You can call from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals.

  2. The Redux store calls the reducer function you gave it.

    The will pass two arguments to the : the current state tree and the action. For example, in the todo app, the root reducer might receive something like this:

     // The current application state (list of todos and chosen filter)
     let previousState = {
       visibleTodoFilter: 'SHOW_ALL',
       todos: [
         {
           text: 'Read the docs.',
           complete: false
         }
       ]
     }
    
     // The action being performed (adding a todo)
     let action = {
       type: 'ADD_TODO',
       text: 'Understand the flow.'
     }
    
     // Your reducer returns the next application state
     let nextState = todoApp(previousState, action)

    Note that a reducer is a pure function. It only computes the next state. It should be completely predictable: calling it with the same inputs many times should produce the same outputs. It shouldn't perform any side effects like API calls or router transitions. These should happen before an action is dispatched.

  3. The root reducer may combine the output of multiple reducers into a single state tree.

    How you structure the root reducer is completely up to you. Redux ships with a helper function, useful for “splitting” the root reducer into separate functions that each manage one branch of the state tree.

    Here's how works. Let's say you have two reducers, one for a list of todos, and another for the currently selected filter setting:

     function todos(state = [], action) {
       // Somehow calculate it...
       return nextState
     }
    
     function visibleTodoFilter(state = 'SHOW_ALL', action) {
       // Somehow calculate it...
       return nextState
     }
    
     let todoApp = combineReducers({
       todos,
       visibleTodoFilter
     })

    When you emit an action, todoApp returned by combineReducers will call both reducers:

     let nextTodos = todos(state.todos, action)
     let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)

    It will then combine both sets of results into a single state tree:

     return {
       todos: nextTodos,
       visibleTodoFilter: nextVisibleTodoFilter
     }

    While is a handy helper utility, you don't have to use it; feel free to write your own root reducer!

  4. The Redux store saves the complete state tree returned by the root reducer.

    This new tree is now the next state of your app! Every listener registered with will now be invoked; listeners may call to get the current state.

    Now, the UI can be updated to reflect the new state. If you use bindings like , this is the point at which component.setState(newState) is called.

Next Steps

Note for Advanced Users

Now that you know how Redux works, let's .

If you're already familiar with the basic concepts and have previously completed this tutorial, don't forget to check out in the to learn how middleware transforms before they reach the reducer.

connect it to a React app
async flow
advanced tutorial
async actions
Motivation
The Case for Flux
Redux is not exactly Flux
action
store
reducer
combineReducers()
combineReducers()
combineReducers()
React Redux
store.dispatch(action)
store.dispatch(action)
store.subscribe(listener)
store.getState()