Solid JS Tutorial #16 - Derived Values

Key Takeaways

all right then gang so in this lesson I want to talk about derived values which is another way of saying computed values and the arrived values are basically values that depend on other signals for example I've got a signal here which is storing a count and that's going to increase by one every time I click on this button now I'm also outputting the double of whatever the count currently is right here and this is what's known as a derived value because it's derived from some of the signal value it depends on it and the way we create these derived values is by wrapping them in a function and because we use the count signal inside this function solid knows to rerun this when the count changes to update the return value of this double function and therefore we see that update over here as the count updates so derived values are just functions that return a value that depend on the value of other signals and also you can have derived values which use store values as well and the principle is exactly the same we just make a function that returns is a value based on some other store property value so that's the basics of derived values now let's put this into action okay so back in our project what I'd like to do is show how many items are currently in the cart now if we think about it we're not actually storing that number explicitly anywhere because if we go to our context then it's just an array of products now each product has a quantitative property so we can add all those up which is what we're going to do but there's no actual value directly that we can access that says how many items are in it so this is going to have to be a derived value so let's go to the home page because that is where the header is isn't it no it's not sorry it's in the app page of the app component so this is the header right here and we have the cart right here so I want to show just here in parentheses how many products we have in the cart so to do that we're going to have to use the cart context because we need access to all the items inside it so let's do that we'll say const items is equal to use cart context hit enter to import that right here so now we have the items now we need to create the derived value which is a function so we say const and we'll call it quantity set that equal to a function and inside here we just return a value now that's just going to be one number now in order to work this out we have to cycle through each item in this array touch up how many we have in total using that quantity property and then just return a single number so what I'm going to do is paste something in right here and then explain it so we're returning a value and we're taking the items and we're using the reduce method audit so the reduce method basically just Cycles through an array looks at all of the different values in that array and we can reduce everything into one single value essentially now the value we're reducing to is going to be a number so it fires this function right here for each item in the array the second argument is the accumulator so this is the value we're reducing to and it starts off at zero so each time we fire this function we get access to the current value of the accumulator but also the current item in the items so it's going to start off as the first item then the second and the third and so forth now each time we find this function we turn a value and that return value becomes the accumulator for the next iteration does that make sense and then after all iterations after we've gone through every item in the array whatever this is is the value this returns so we take the current accumulator which starts off at zero and then the current product and look at the quantity of that and add them together so zero plus the quantity of the first product so that might be two so then this becomes two for the next iteration then we cycle on to the next product and we say this is two now and the current product so the quantity of the current product the second one could be four so we take two and we add four and it becomes six and so forth so by the end of it we're going to have a number and that's the amount of items inside the cart all right so hope that makes sense now we can use that down here so inside curly braces we can say Quantity and invoke him save that and come over to the browser and we can see we have five items in the car well we do two plus two plus one is five and if we go to another product and start adding them six seven eight let's try something else add to cart 9 10 Etc so this is working I'm also going to do another derived for you inside the cart page which is going to be the total price and that's based on all of these items right here so let's go back to the cart page to do this we already have access to the items right here so we just need to make that derived value which is a function I'm going to call Total and we set that equal to an arrow function inside here we need to return the total amount that this is going to cost so 2 times 12 plus 2 times 21 plus 21 Etc so what I'm going to do again is just paste something in and we're using the reduce function again on the items to cycle through them and this time we're taking the accumulator and we're adding this thing each time around so the product quantity times the product price so in this case it would be 2 times 12 and then we add that to 2 times 21 then we add all that to 1 times 21 Etc until we've done them all and then we have a figure for the total amount so now we can output that right down here at the bottom and I'm just going to copy this from my repo because there's lots of Tailwind classes in it so we have a paragraph tag with some margin padding border and font bold applied to it and we say the total cart price is the total right here and then a pound sign just before that so this grabs this value here and remember the whole ID of these derived values is that they update whenever the items change so it's always going to be a Fresh Value so let's say this and try it out and we can see the total cart Price Right Here 147 let's add something let's take a look at this it's 12 so it should become one five nine yep and it does awesome so that my friends is derived values