![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6176498/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6176512/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6176514/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6176534/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6176628/IMG_20180610_133502__1_.jpg)
What is Redux
"A predictable state container for JavaScript apps"
UI State
Server State
Application
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177199/pasted-from-clipboard.png)
ReduxData Flow
What is Redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177116/pasted-from-clipboard.png)
Who Using Redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177129/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177131/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177132/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177134/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177136/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177138/pasted-from-clipboard.png)
And Many more
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177143/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177144/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177145/pasted-from-clipboard.png)
Demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177152/pasted-from-clipboard.png)
Things we Need
- Install Redux Developer tool
- React Developer tool
- The app must enable redux dev tool usage in production
Time Travel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177219/pasted-from-clipboard.png)
Redux Time Travel
How to View hidden redux store
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177172/pasted-from-clipboard.png)
Locate Dispatch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177174/git.gif)
Modify the JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177177/twitte.gif)
Instagram Redux Store
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177185/insta.gif)
They use ES6 Symbol
Tinder redux state
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177211/pasted-from-clipboard.png)
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 !!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/963299/images/6177244/iamdone.gif)
Understand the client side state through Redux
By raji sekar
Understand the client side state through Redux
- 1,439