Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Dispatch Action Payloads to Reducers

    John LindquistJohn Lindquist

    While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. This lesson shows you how to pass an action payload along with your action type to update the state.

    angularAngular
    2 - 6
    ngrx-store@ngrx/store
    rxjsRxJS
    5 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Now that we've extracted out our types of hour and second, the next thing I want to work on are these hard coded plus ones, which I want to extract so that I can pass them in and change that if I want.

    00:12 I'm going to move this plus one up into this object that comes in and call it "payload." Instead of plus one, I'll say payload, and same thing here, I'll say payload.

    00:27 Now in my app, I need to pass a payload along, so we'll start by hard coding it. We'll hard code that to just one. Now when I refresh, we'll have this same behavior of it incrementing by one second, and when I click, it's incrementing by the hour.

    00:45 What I want to do is move this one up even further into here where I map to something that has a one. Instead of mapping to just hour, I'm going to map to an object, where the type is hour, and the payload is one. Then here I'm going to map to an object where the type is second and the payload is one.

    01:14 That way, this object that comes through, instead of just being a type, I'm going to call it an "action." I can delete this entire object there, and we'll just call that the action. That way, we've extracted everything that came through before, and it's being passed as an object with both the type and payload and a type and a payload.

    01:34 Now when I refresh, you can see I'll have the same exact behavior, one second and one hour. I could also change it so that when I click, I would update by four hours and every second it would update by three seconds.

    01:52 That's now configurable, so whenever I refresh, you can see three seconds, three seconds, four hours.

    Discuss

    Discuss