Solid JS Tutorial #14 - Context

Key Takeaways

okay then my friends so in this lesson I want to make some states which is going to keep track of any products that we add to the shopping cart now on each product page I'm going to add a little button and when we click on that button that's when we want to add a product that product to the car and the way that we'll do that is by making a store to keep track of all of those products that we've added to the car so the store value will be essentially just an array of product objects and every time we click on a button to add a new product to the cart a new object is going to get added to the store but we need to think a little bit about how this is going to work because we're going to need to access this store on various Pages we're going to need it on the product page so that we can add new products to the store but also on the cart page so that we can access all the products in the store and list them out also in the header we'll eventually be showing how many items are in the car as well so we need to access the store inside the header so then if we need to access the store in multiple pages and components in the application where's the best place to make the store well there's two options we could just make a store in a new file export it and then just use in all the different locations we need in because stores and signals don't have to be tied to specific components so we could do that but instead I want to take this opportunity to talk about context in solid JS because a context and a context provider can allow different pages and components to share state so the way this works is very similar to how it works in react applications we make a new component and inside that component we make whatever state is that we want to share between other components in our case that would be the store which holds an array of products in the cart so this component at the minute is just like any other solid component that contains a store inside it next we make a new context object using one of solid's built-in functions and on that context object we have access to a special provider component which is used to provide the context to other components so inside our own custom component we made we return this context provided component in the template and then we wrap that around props.children and that means that when this component that we just made wraps any other components in our application those other components are the props.children and they get output right here nested inside the provider component so whatever components are inside here now will now be provided with values that they can use and the values that they can use are determined by the value attribute right here so in our case that would be our store and our set store function so this component could wrap our root app component and therefore it's wrapping our entire application and that means that any component in our application will be able to access this context value this store so our product page could access it the cart page could access it and any other component inside the app could access it and the way it accepts it is by using a function called use context so we'll see that later but for now let's set up our context to look a little bit like this so the first thing I'm going to do is create a new folder inside source and that folder is going to be called context and any context files we create are going to go inside here so new file and we'll call this cart context.jsx and inside here we pretty much need to do everything we just did in a solid playground so let me go over there and I'm going to copy all of this stuff right here and paste it in and we also need to import a couple of things as well so these two things at the top so let me grab those and we're going to paste those in as well so we're creating the cart context right here using this function create context that we import and then we create this function which is a component called cart context provider and we're taking the props we set up a store which is an empty array at the minute we will add an item in that in a second then we return a template which is the cart context provider which comes from this and we pass a value to everything now at the minute we get an arrow right here and that's because stupidly I've tried to return two values here and they should be wrapped in an object so their properties on an object so now we have an items property on that object and the set items property which are these two things right here so we wrap this around all the children and we need to export these things actually so I'll export this at the top this cart context because we might need it in another file and also this one we do need this in another file because this is going to wrap our app component inside the index.jsx file so I think that's pretty much it for now let's save this and let's go to index.jsx and down here in between the router and the app let's do the cart context provider this thing right here that's going to import it for us and let's put the closing tag after the app like so alright so now this app is being wrapped by this context provider meaning it's going to have access to these values right here so how do we do that how do we access those values in other components inside our project well the way we do this is by using a built-in function called use context so let me go to the cart page where we want to use that context and I'm going to use that function so we say const and then we destructure what we want back from the context in our case I want the items right here so I will say const items is equal to use context and invoke that now we need to import that from solid so up here we'll say import use context and that comes from solid JS like so okay so inside here we need to say what context we want to use well in our case that's this context right here the cart context and we export it so we can use it over here so we'll say cart context so we click on this to import it and now we're getting the items back from that context now at the minute that's going to be an empty array but we could add some kind of dummy element in here so I could do an object and we could do a title and we'll just say test product and then we'll do a quantity property which is going to be how many of these we've got in the cart and that could be two then we'll do an ID that can be a hundred doesn't really matter and then we'll do a price of the item which could be 15 again doesn't really matter so now we have this product inside the items array what we could do is use that product by grabbing the items and then cycling through the items down here so I'm actually going to paste this in because we've seen this kind of code before so we'll use this four components and we'll say for each items and then for each item we fire a function and grab that item we output a paragraph for each one where we output the item title the item price and the item quantity at the end okay so I'm going to save this now and see if this works let me go to a browser and okay we can see now we have that test product in the cart and there's a quantity of two here as well awesome so that's working however there's a better pattern of using context in a component because at the minute what we're doing is we're using this import right here let me just cut it and we're also using this input right here so we're importing two things to use the context right now what we could do instead is go back to this context file and we could make a little helper function which we export so let me say export function it's going to be called use cart context like so and all it's going to do is return use context and then we're going to pass in the cart context like so so we're doing the same thing right here as we are right here what that means is we can get rid of these Imports right here get rid of that and then over here we need to import the use context thing from solid so let me put that there and what we can do now is just use this thing right here use cart context inside the component now so I could paste this in in fact what I'll do is delete some of that so that I can click on this to import it so we're importing that one thing now and we invoke that and that's going to return the same things to us so const items is equal to use cart context and that's a bit easier in whatever component now that we want to use this in we just have to import the one function so you might see that pattern a little bit all right so now we have the items we're doing the same thing we're going to cycle through those yep that works what I'm going to do is add one more item so let me copy that and paste it down here we'll say test Product 2 quantity three ID 101 and the price is 25 save that see if it works I'm going to refresh yep we get a test product two as well awesome so that's how we can create a context and now we could use that context value in any component it's shared between the different components anywhere in the application we can use it so in the next lesson what we're going to do is we're going to access the context in the product page the product Details page and use the set items function to actually update this store value so we can add items to the cart