Redux Workshop, 2021-05-05

Transcript

1. What’s in this workshop?
   Oh, the topics we’ll cover!
   Redux without React—or anything, really
   
   
   Integrating Redux with React Hooks
   
   
   Creating Higher Order Components with the Connect API
   
   
   Using Redux Toolkit
   
   
   Working with Asynchronous Actions
   

   View Slide

2. The Redux API
   It’s relatively small.
   

   View Slide

3. View Slide

4. Some Rules for Reducers
   Disobey at your own peril.
   • No mutating objects. If you touch it, you replace it.
   
   
   • You have to return something and ideally, it should be the
   unchanged state if there is nothing you need to do it.
   
   
   • It’s just a JavaScript function.
   

   View Slide

5. Prefer Flat Objects
   const angryBlogPost = {
   
   
   title: 'A letter to the editor',
   
   
   content: 'I am very salty about…',
   
   
   author: {
   
   
   firstName: 'Steve',
   
   
   lastName: 'Kinney',
   
   
   location: {
   
   
   city: 'Denver',
   
   
   },
   
   
   },
   
   
   };
   

   View Slide

6. Prefer Flat Objects
   if (action.type === 'CITY_CHANGED') {
   
   
   return {
   
   
   ...state,
   
   
   author: {
   
   
   ...state.author,
   
   
   location: {
   
   
   city: action.payload,
   
   
   },
   
   
   },
   
   
   };
   
   
   }
   
   
   

   View Slide

7. View Slide

8. View Slide

9. View Slide