Structuring React Data Flow with Redux

Kevin C Chen @ Product Development Group

WHY?

Data Handling Challenge

  1. Where do I keep all the data regarding my application along its lifetime?
     

  2. How do I handle modification of such data?
     

  3. How do I propagate modifications to all parts of my application?

React   +   Redux

Describe UI as a function of state

Emits state updates in response to actions

Render UI

Manage State

state mutations becomes predictable

Basic Principles

One Store

Read-only State

State change with Reducer 

console.log(store.getState())

//Prints below
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    }, 
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

1. Single source of Truth - only 1 store

state of your whole application is stored in an object tree

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

2. State is read-only

Emit an action to mutate state

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

3.  Changes are made with pure functions

Pure  reducer(s) specify how the state tree is transformed by action

Action

Middleware 1

Reducers

React
Components

 store.dispatch(action)
(previousState, action)
new
Combined
State 
store.
getState()

UI Re-render

Redux Data Flow

` onClick()

Middleware 2

Middlewares

Store

Solving the Challenges

  1. Where do I keep all the data regarding my application along its lifetime?
    Ans: Let Redux handles Application State

  2. How do I handle modification of such data?
    Ans: Use Reducer that respond to Actions

  3. How do I propagate modifications to all parts of my application?
    Ans: Use react-redux that subscribe to state changes

React Components

Container Components Presentational Components
Location Top Level, route handlers Middle and leaf components
Aware of Redux Yes No
To read data Subscribe to Redux state Read data from props
To change data Dispatch Redux actions Invoke callbacks from props

Redux Vs Flux

  • Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux
     
  • Remove the Flux boilerplate where there is a need to
    • Emit an update
    • Register the Store with a Dispatcher
    • For the Store to be an object
       
  • Redux preserves all the benefits of Flux and add new benefits 
    • easy undo-redo
    • hot reloading
    • dev friendly tooling
Redux Flux
How Split the root reducer into smaller, hierarchical, manageable pieces Add more stores since they are usually flat, and not connected
Design Pattern Functional Composition Callback Registration

 


 
Result Like nested React components, it reduces boilerplate code and makes them easier to reuse & port Store sprawl with lots of non-reusable boilerplate code

Scaling the code when application grows

Redux Vs Flux

image source:[https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.3mir3rhiq]

Redux Flux
How Stores and Actions are just pure functions.  How to test Stores?
React Hot Loader breaks Flux stores is edited
Result They are easily testable in isolation. Call them, and make assertions on what they return.

Can also mock the Redux store or HTTP requests for tests		 Cannot test the functionalities involved in data flow easily

Mocking is difficult

Testing the code with Unit Tests

Redux Vs Flux

Summary

  • Redux Principles

  • Redux Data flow

  • Redux Vs Flux

References

Questions?

Code Walkthrough

Made with Slides.com