But we are going to have to change some things that we created in the previous episode to make this work because I miscalculated a bit how this is supposed to work. But those are going to be just small changes.

And you know... these things happen in software development, sometimes you have to change your approach mid way if your assumptions were incorrect or you haven’t thought things through, which I obviously did not.

We are also going to introduce a bit of state management to our app, which I’m not very happy about because I thought we would be able to rely solely on React Query for that, but turns out that we can’t, or maybe I’m missing something and that is why it’s not working properly.

I will show you what I mean during this episode.

But this is not all bad, because I got to play with Zustand -  a very light weight state management library, which as you will see is a joy to use.

In this episode we are going to create a mini cart for our e-commerce site using Zustand state management library.

Mini Cart And Zustand

Currently we are passing the data to the navigation component with prop drilling. Nothing wrong with that, but sometimes that can get pretty complex so you have to use other strategies to get the data from one component to another. That is why we are going to use Context API in this episode, and get rid of prop drilling to get the data to our navigation component. Also I'm going to show you how to create simple state management using Context API.

In this episode we are going to use React Context API to get the data for our navigation and also to create a simple state management.

Using Context API

First of all I'm going to show you something called **Prop Drilling**, which all by it self is not a bad thing, it is a pattern that you will come to get to know while working with React. However, as you will see in this video it can bacome pretty unwieldy very fast if you don't plan composition of your components.

So when sending data between components becomes very complex you can alleviate the situation with Context API which you can use to send data to nested components or even as a simple state management tool. It's very cool as you will see.

In this episode series we are going to take a look at Context API which comes built in React, and is nice way to share data with you React components.

Context API

Now we are going to create a confirmation page for our users on which we are going to be displaying all the necessary information, this will be done in the preparation for the next video in which we are going to create the actual reservation.

We are also going to learn how to automatically persist the state in our Vue and Vuex application.

In this episode we are going to continue the checkout process and learn how to automatically persist state in Vue and Vuex

Persisting State

I'm going to show you what are the advantages of using a system like Vuex in your Vue.js app versus not using it. So firstly we are going to take a look at how state management is done by default, see what is the problem with that approach, and then we are going to take a same example and make it use Vuex for state management. Fun times! :)

In this episode we are going to take a look at Vuex, a state management library for Vue.js

Tutorials tagged with: state management

Get in touch