Pass Template Input Values to Reducers
Angular allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.
[00:00] To clean this up a little bit, let's go ahead and since we're just taking an action and dispatching an action, we can just go ahead and call this "Store Dispatch." Bind store. We'll just use it as the callback, meaning whatever gets passed into subscribe will just be dispatched to the store. I'm also going to pull out my click map two from here. I'll drop it up here because it makes more sense to do this at declaration when I'm actually assigning it.
[00:29] I'm also going to move this observable up into another field declaration. We'll just call it "Seconds." And then clean these up with some new lines. Now what this read before, now it's just this clicks and this seconds. Now it simply reads a little bit better.
[00:51] What I want to do is be able to send a different value other than four through whenever I click on something. If I have something like an input and it's a number input, then we'll just go ahead and give this a default value of zero. I want to send whatever is in this input through to the click. Then we can just do that with a ref here.
[01:14] I'll call this "Input Num." Then we'll pass along inputnum.value whenever this is clicked. What I have to do now is change my map two because map two just takes an object, whereas map takes a function where this value is this value that's being passed into next. With map two, you can't pass along values, but with map, you can.
[01:45] This function right now is returning an object. If you just return an object from an arrow function, you do have to wrap that in parens or else it will think this is the function block. But we want it to be an object. Now we want to take this value and assign that to the payload, but also because this is going to come through as a string and not a number. We will want to parse it or number it just to convert it from a string into a number.
[02:11] Now when I refresh, you'll see my clock is ticking along as normal three seconds at a time like we had before. Then when I click update, the hours aren't changing. But if I increment this to one and I click update, the hours update by one. If I increment this to two, you see they go up by two. They'll go all the way up to eight. You can see we update by eight hours each time I click.
click$ = new Subject<string>().map((value) => ({type:HOUR, payload:parseInt(value)}));
The typescript compiler doesn't like that. It says "Argument of type '{}' is not assignable to parameter of type 'string'." But it works in the browser as expected.
If I take out the parseInt function, typescript is happy, but it changes the day by 4 values (from say Oct 9 to Oct 13), even though the input.value is 0.
Any idea what needs to be changed to make the ts compiler happy and the browser to work as expected?