Understand the client side state through Redux

Title Text

/**
 * @author Raja Sekar Durairaj
 * @title Tech Lead
 * @company BNY Mellon Technology Pvt Ltd 
 * @socialMedia fb.me/rajsek
 */
const meetup = new NullChennai();

const speaker = meetup.getSpeaker('Rajsek');

speaker.aboutSpeaker();

    Hi... i am Raja Sekar Durairaj
    Full stack developer @BNY Mellon Tech Pvt Ltd.
    Makes Facebook a safer place
    Read lot of things and write few thigns in medium 
    blog https://medium.com/@rajsek

speaker.getTitle();
    Understand the client side state through Redux

What is Redux

"A predictable state container for JavaScript apps"

UI State

Server State

Application

ReduxData Flow

What is Redux

Who Using Redux

And Many more

Demo

https://www.airbnb.co.in/

Things we Need 

  • Install Redux Developer tool
  • React Developer tool
  • The app must enable redux dev tool usage in production 

Time Travel

Redux Time Travel

https://chvin.github.io/react-tetris/

How to View hidden redux store

Locate Dispatch

Modify the JS

Instagram Redux Store

They use ES6 Symbol

Tinder redux state

Non- Subscribed Members dont have option to view next data without swiping left or right

Few other things to Note 

  • There is no issues in using redux dev tool in produciton
  • In Angular we use redux via ngrx
  • Time travel to analysis the issue
  • Improve code readability
  • Along with browsers, it has been used in electron, React-Native
  • Try to use Es6 Symbol as action type.
  • Dont save any secure date in Client Side State.

Thanks !!!

Made with Slides.com