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

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

Redux Data Flow

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

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

Scaling the code when application grows

Redux Vs Flux

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

Testing the code with Unit Tests

Redux Vs Flux

Summary

• Redux Principles

• Redux Data flow

• Redux Vs Flux

• Redux Official Doc
• React Redux Example
• A cartoon intro to redux
• Redux Tutorial

References

Questions?

Code Walkthrough