Expose Angular Component Logic Using State Reducers
A component author has no way of knowing which state changes a consumer will want to override, but state reducers handle this problem by allowing the parent component to override any state change.
Instructor: [00:01] This ng template allows the parent component to control what view is displayed based on the state of the toggle component. This toggle component still has some hidden logic that controls how the state is updated, when this toggle function is called.
[00:19] In this case, that logic is just toggling the ON value of the component. We're going to use the State Reducer Pattern to give the parent control over how that state is updated.
[00:31] First, we'll create an interface for the toggle component state. It just has one Boolean ON property. Then, we'll create a type for the toggle state reducer. It's a function that takes the current state which is of type toggle state and it changes object which is a partial value of that toggle state. That will return a new toggle state.
[00:54] This may look familiar to those use Redux, state is your current state, and changes fills the role of the action and it returns a new toggle state. Now, we'll configure our toggle component to take a state reducer as an input that will be of type toggle state reducer.
[01:12] We'll initialize that to a function that takes a state and some changes. It returns a new object with that spreads out the current state and overrides that with the new changes that are passed in.
[01:25] Now, we need to actually use this state reducer. In this set ON state function, we'll create our old state which is just the current ON state. We'll calculate the new state by using the state reducer function with the old state passed in and the new ON value as it changes object.
[01:45] If our state reducer has actually changed the state object, then we will apply the changes with the new state value. Now in order to use this, we'll go to our app component. We'll set the state reducer to our own custom state reducer.
[02:01] Now, let's define that in our TypeScript file. Let's say our app component wants to keep track of the number of times the toggle is clicked. We want to create a state reducer that will stop the button from toggling, if we reach a certain limit.
[02:15] We'll set our state reducer function to be a function that takes the current state and some changes. If the number of times clicked is more than our limit, we'll just return the existing state with no changes. If the ON value has actually being modified, we're going to increment this.times clicked by one.
[02:37] Finally, we'll pass through our changes just like the default state reducer. Now, let's see if this works. We're going to keep clicking and it stopped. Looks like it's working.
For something like this, I think another decent approach would be to have the Toggle just emit the (toggle) event, but not change the internal state. Then, have the App listen for that, and change the [on] property as needed. Kind of like a "controlled input" in React.
@Ben, yes, that would be a reasonable way to do it for this case. That makes the toggle component into a stateless presentational component.
Sometimes you want to maintain some local state inside your component, but you also want to give users the ability control that state if they want. That's what the state reducer pattern lets you do. The decision here is basically who should be in control of the state changes.
Controlled input (stateless component) - All state changes must be defined by the user of the component State reducer - Component provides a default state change behavior, but users can override that behavior if they want
@Isaac, I can dig it—it's interesting stuff. I hadn't seen this pattern before. Though, to be fair, my experience with reduces, in general, is extremely limited. I appreciate the fresh perspective.
This is a good course but I don't think this pattern would scale well in a enterprise application.
Badhiya, very nice :)