Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

The Redux API It’s relatively small.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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', }, }, };

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content