The Redux The State Management

Transcript

1. Redux The State Management Sastra Nababan By
2. What is Redux ? Predictable state container for Javascript Apps ✓ State Management ✓ State Container ✓ Data Binding Also known as frontend javascript library for :
3. What is State Anyway ? Hey…. You keep talking about state
4. State is….. Memory/Space to hold your app information ✓ Data ✓ Communication ✓ Action ✓ Session ✓ Location
5. Server Client Send Request Process & Rendering 1 3 2 Server Send Rendered Page Client Most of your app state stay here Server Side Rendering
6. Server Client Send Request Process & Rendering 1 3 2 Server Send Data Client Most of your app state stay here Client Side Rendering Now your state lives here too 4 Client Rendering
7. Things become complex & crazy App Growth
8. Can Redux Help ? Yes, Let Redux do that things for you
9. Why Redux so popular in react world ? React Redux +
10. React app 
 made by 
 component 
 hierarchy
11. Component Communication The Challange is…..
12. Component Communication Scenario Parent to Child Child to Parent
13. Component Communication Scenario Sibling to Sibling Any to Any
14. Can you image this ?
15. Ok now let’s talk about Redux
16. How to learn Redux ? ✓ Understand the big picture ✓ Get familiar with basic functional programming ‣ Pure Function ‣ Filter ‣ Map ‣ Reduce ‣ Compose ‣ Immutability
17. When to use Redux ? If you aren't sure if you need it, you don't need it. - Pete Hunt I would like to amend this: don't use Redux until you have problems with vanilla React.
 - Dan Abramov “ “ Today.
 - Sastra Nababan “
18. Redux Principle 1 of 3 Single source of truth It’s called store. Whole application state stored here
19. Server Client Client Side Rendering with Redux
20. React Component Communication with Redux
21. React app 
 made by 
 component 
 hierarchy
22. Redux Principle 2 of 3 State is read only The only way to change the state is to emit an action
23. Redux Principle 3 of 3 Changes are made with pure functions The only way to change the state is to emit an action
24. Redux Architecture Components in app Actions Store Reducer store.dispatch(action)
25. Store is… Plain object of app state
26. Action
27. Reducer
28. Advanced Topic
29. Middleware The moment point between dispatching an action & reducer Components in app Actions Store Reducer store.dispatch(action) Middleware • logging • crash reporting • asynchronous API • routing • etc
30. Async ✓ redux-thunk ✓ redux-promises ✓ redux-sagas ( es6 generator ) How to manage async process ?
31. Redux Persist How to Store data locally ? ✓ HTML5 Local Storage ✓ redux-persist ✓ redux-storage
32. /,
33. Thanks Mauliate