Transcript from the "Challenge 12: Functional" Lesson
[00:00:00]
>> Evan You: So much for Vuex. The next exercise, I wanna sort of just switch gears and talk about something functional, right? So if you're familiar with react, you probably know that react is in general its ecosystem. And its community is in general much more into functional programming. And Redux is a very good example of that sort of preference.
[00:00:29] because the whole premise of Redux is that your app state is immutable. All right, so if we have an initial state of count: 0. Similar to how Vuex takes different mutations, Redux takes different action types. And the core concept in redux is called something called a reducer. So a reducer is a function that looks like this, and reducer takes state.
[00:01:10] So this is prevState and action and it does something. So what it does is the reducer will return a whole new copy of your state using the previous state and the action type. And because this is just one big function, right? So we'll do a big switch statement.
[00:01:34] switch (action; { case 'inc': return { count= preState.count + 1 } And case: 'dec' : return { count: prevState.count- 1 }. And because we have return statements here, I'm not going to do the, there is an extra colon here. I'm not going to do the break because the return statement kind of does that already.
[00:02:23] And if it's default, just return prevState or you can throw an error. Like on no action type, but the idea is pretty simple. You have a previous state and your next date is always constructed on top of the previous state, based on what action type you receive. So it's very functional because it takes some arguments who return something new, and it's not mutating anything in place.
[00:02:59] But, in effect, when you apply this to same management pattern and achieve the same in effect in terms of your component. Where both dispassion and action, send it to the central store, something happens to the store, your state get updated. Either replace or mutate it and eventually, that change is reflected as side effect.
[00:03:24] And the side effect, in a front end app is updates in the DOM, right? So this is the essence of redux, right? So we can apply very similar concepts in a Vue app. If this is the type of API you prefer. We can totally do that in Vue as well.
[00:03:50] So let's look at our exercise and look at the desired API. So this interface in fact inspired from, so this kind of combined influence from redux and a few other libraries. There is a library called Hyperapp, which exposes almost exactly this interface. And I believe also looks very similar to this.
[00:04:17] But the idea is, you sorta have this model, which is the same as state. And you have possible actions. And each of these actions take, so these actions, essentially receive the previous state as the argument and they return the next state. So instead of switch statement, we still break them into separate functions.
[00:04:45] But all of them receive your state as the argument and returns the next new state. And your view is, a function that you see three arguments. The h is our random function argument, and then there's model. It's directly passed into your random function, and your actions are also passed into the random functions.
[00:05:09] So everything is passed, into your function as arguments. This is like as functional as it can get. [LAUGH] And what you need to do, when you need state you reference it on the model. When you need things to change you trigger functions on your action, right? So here you can see that we're passing, so this is the syntax for handling events in renofunctions.
[00:05:40] You use the on nested under your data object, and inside that you do {on: { click and passing the function to call, when the button is clicked.
>> Evan You: Eventually, this is what we want to achieve. Really, the whole exercise is about, given a desired API, how do you use existing primitive to present that API?
[00:06:12] To create something that satisfies that API. And this is in fact, totally feasible within the context. And if you look at the reference implementation, it can be as short as down to 12 lines of code.