Redux Toolkit - Quick Intro - 2022
1 like1,381 views
The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.
Redux Toolkit - Quick Intro - 2022
- 2. Google Developer Expert (Angular) Microsoft MVP Formazione front-end Speaker & Content Creator Community Founder Twitch Partner fabiobiondi.io
- 4. fabiobiondi.io Javascript ES6 & Typescript React Redux fundamentals REQUIREMENTS WHAT YOU SHOULD KNOW TO FOLLOW THIS SESSION
- 6. fabiobiondi.io Global State Manager for JS apps Design Pattern used in React, Angular, ... Single Source of Truth (one state, aka store)
- 7. fabiobiondi.io Code Isolation: state, actions, (side) effects, selectors Debuggable Time Travel Debug w/ Redux DevTools
- 10. fabiobiondi.io current State (STORE) ACTIONS history
- 11. fabiobiondi.io Diff with previous state
- 12. fabiobiondi.io
- 13. fabiobiondi.io REDUX FLOW (A TYPICAL “Async” SCENARIO)
- 14. fabiobiondi.io C C C C C C C C C C C C C action selectors Middleware & Reducers
- 15. fabiobiondi.io C C C C C C C C C C C C C action selectors Smart Component (aka Container) Router Middleware & Reducers Presentational Components (Dumb)
- 16. fabiobiondi.io SideEffects XHR, Routing, LocalStorage Store Middleware thunk, saga, … Action addUserSuccess Reducer Update State props callbacks Presentational Components C C C C Container Selectors getUsers Action addUser
- 17. fabiobiondi.io
- 18. fabiobiondi.io REACT REDUX HOOKS npm install react-redux
- 22. fabiobiondi.io
- 23. fabiobiondi.io REDUX TOOLKIT npm install @reduxjs/toolkit
- 24. fabiobiondi.io 1. A framework to simplify Redux setup 2. Opinionated 3. Utilities: Thunk, Immer.js, devTools, … 4. Effective
- 25. fabiobiondi.io
- 30. fabiobiondi.io createAction Notify something has happened
- 32. fabiobiondi.io createReducer How state changes when an action is dispatched
- 33. fabiobiondi.io Initial Value Action Types State Update Current State & Action
- 34. fabiobiondi.io
- 35. fabiobiondi.io immer.js is now part of Redux Toolkit
- 36. fabiobiondi.io
- 37. fabiobiondi.io createSlice ( actions & reducers in one step 🙅 )
- 38. fabiobiondi.io Initial State Slice Name Action Creators + Reducer Export Actions
- 40. fabiobiondi.io ASYNC ACTIONS with Thunk Middleware
- 42. fabiobiondi.io Slice now should be updated to handle Async actions
- 43. fabiobiondi.io Thunk Type Hook to get dispatch fn Dispatch Type