react redux.pdf
1 like2,011 views
This session will be about maintaning the store on client side with redux, And will have more details about state management addressing single source of truth concept
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=560&fit=bounds)
![STATE MANAGEMENT IN REACT [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/statemanagementinreactautosaved-241017053717-15b39b76-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to react redux.pdf (20)
Ad
More from Knoldus Inc. (20)
Ad
Recently uploaded (20)
react redux.pdf
- 1. Presented By: Pushpendra Sharma & Umang Goyal Introduction to React-Redux
- 2. Lack of etiquette and manners is a huge turn off. Knolx Etiquettes Punctuality Respect session timings, you are requested not to join sessions after a 5 minutes threshold post the session start time. Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
- 3. Agenda Anatomy of modern webapp 01 02 03 04 05 How React Redux Benefits of using Redux What is State Management How to Redux works 06 How to use Redux with React ( Demo )
- 4. Anatomy of Modern Webapp ❖ It a single page application, means should update UI dynamically with the data fetched from server without re-loading the page ❖ It should be fast and frictionless experience
- 5. Architecture of modern webapp ❖ Instead of creating pages, components are build first and then are composed in complex UIs. ❖ Data is passed into those components and it takes care of how to update the UI. ❖ Data is kept out of the component tree so that its not affected by re-renders of UI, its centralised and consistent. ❖ A state management solution to manage data independent of the UI layer.
- 6. Architecture of Modern Webapp user: { email, token, }, transaction: { data, page, }, account: { isAdmin, privileges, } Component tree Data
- 7. What is State Management It is exactly as it sounds, managing state of the application. State: ➔ Data fetched from server. ➔ User details, tokens, role. ➔ Details filled in the forms. ➔ etc Management: ➔ Initializing ➔ Updating ➔ Deleting
- 8. Why is State Management required ❖ A centralised data state ❖ Consistent data available across applications to all pages and components ( header, table, graphs, menus ). ❖ Data is readily available and updated on the client side instead of requesting from server each time.
- 9. Why is State Management required ( login ) ( navigate, view feeds ) ( update details ) ( select user options ) ( user details ) ( user details ) ( transaction, user details etc ) ( user details ) ( transaction ) Event Data
- 10. Why is State Management required ( login ) ( navigate, view feeds ) ( update details ) ( select user options ) ( user details ) ( feeds ) ( transaction ) ( . . . ) Event Data
- 11. Why is State Management required ( login ) ( navigate, view feeds ) ( update details ) ( select user options ) ( user details ) ( feeds ) ( transaction ) ( . . . ) Event Data
- 12. React ❖ Javascript library ❖ Used to build UI components, especially for a single page application. Redux ❖ Javascript library ❖ Used for state management in Javascript apps. ❖ Works independently of UI library. What is React Redux
- 13. How Redux works View Action Reducer Store(cent ral State) Selector Redux is a predictable, centralised, debuggable and flexible state container for JS apps.
- 14. How Redux works View Action Reducer Store Selector Store is the state object which is maintained by redux. It’s a simple javascript object. Button user: { email, token, }, transaction: { data, page, }, poins: { score, history }, account: { isAdmin, privileges, } Store ( State Object )
- 15. How Redux works View Action Reducer Store Selector Action is simple JS object that should a “type” key and can also have a “payload” key. Passed into a dispatcher function Button { type: ‘ADD_TASK’, payload: { name: ‘buy milk’, done: false, } } Action dispatcher() Event
- 16. How Redux works View Action Reducer Store Selector Reducer is a pure JS function that takes current state and action as arguments and returns the updated state. Redux only has one root reducer. Button function ({ state, action }) => { case: ‘ADD_TASK’ return { …state, task: action.payload } case: ‘DELETE_TASK’ return { …state, task: action.payload } } Reducer
- 17. How Redux works View Action Reducer Store Selector Selector is a pure JS function that takes current state and returns a slice of the store object. It re-evaluates its output when store is updated and view can subscribe to it.. Button function (state) => { return state.tasks } Selector
- 18. Benefits of using Redux with React ❖ Predictable flow of data ❖ Centralised data store ❖ Debuggable, due to availability of redux dev-tools ❖ Leaner react components
- 19. Demo
- 21. Thank You ! Get in touch with us: