ContextApi | University final year project , a context-aware API

In Svelte, context is set with setContext(key, value) in a parent component, and children can access the value object with getContext(key). See the docs for more info.

In your case, the context would be used like this:

You need to move your AppProvider to _app.js and remove it from both index.js and cart.js then both pages will be able to access the same context.

Your _app.js should look like this

The problem is that you are using useContext() for storing the count. The value of the context is same for all the components that is why when you click the add button, your context value changes and because it is same for all components, your other components reflect the updated value as well. I would recommend you using useState() for each item component so they don't effect the count value for other items.

EDIT I am unable to add a comment because i don't have the required points for it. I saw your code and you can do the following in your Product.js file:

1. Forget about the context provider.

2. Add useState() in your Product component like: const [count, setCount] = useState();

3. Make 2 functions (addFromCart & removeFromCart) which would be called on onClick for the button which had to add and item or remove an item from the cart

4. For addToCart you can do something like this:

   const addToCart = () => setCount(prev => prev+1);

5. For removeFromCart do this:
   const removeFromCart = () => { setCount(prev => prev-1) } //make sure that your count is not below 0 by using an if-statement

This way, when you press add for a product, it wont affect other products because each product has its own state :)

Both way will work OK. If your project is small or middle-sized, context API will work without any problem.

AppContext.jsx

The root of your problem is that you are trying to infer the type of an object after it's been created rather than understanding what type of object will be created. In my opinion, this is a backwards design.

It is better to avoid using typeof when possible. There are things that you can make clear with a type or interface that typeof cannot possibly infer on its own. Can the string "myString" be any string value, or is it a string literal? Can this null property only ever be null, or could it be null or some other type? And what other type would that be? Hopefully you get the point.

dispatch has a known type. It is a function which takes an action and returns void. You do not need to use typeof dispatch to get its type.

The problem is most likely the whitespace in this line:

It's consumer should be capital.

Calculate the balance for one transaction: