Hi there!!
I’m really struggling to find where the error is!
I am not able to render the UI of the store and I cannot find what I am missing… My whole code is here: https://gist.github.com/aafda80f6fd94d8bcba95ee1854a2d1b
Hello,
The learning environment sometimes makes it more difficult to spot errors because not everything shows in the browser’s console for some projects. It depends on the type of error being experienced though. I’m not sure if this is one of those projects, but it’s always worth a look at the console to see if there are any errors.
If you are getting to the point where error messages show in the console, then it is likely pointing to this from your cartSlice.js file:
const initialCart = {};
export const cartReducer = (cart = initialCart, action) => {
switch (action.type) {
case 'cart/addItem': {
const { name, price } = action.payload;
// if the item already exists, increase the quantity by 1, otherwise set it to 1
const quantity = cart[name] ? cart[name].quantity + 1 : 1;
const newItem = { price, quantity };
// Add the new item to the cart (or replace it if it existed already)
return {
...cart,
[name]: newItem
};
}
case 'cart/changeItemQuantity': {
const { name, newQuantity } = action.payload;
const itemToUpdate = cart[name];
const newItem = {
...itemToUpdate,
quantity: newQuantity
}
return {
...cart,
[name]: newItem
};
}
default: {
return {
...cart,
[name]: newItem
};
}
}
};
You should double check what you have as the default case. There may be other issues, but that’s the first thing I spotted.
Click for another hint
Recall that the default should just return the current value of the state when it can’t find a corresponding case for the action.type. This allows for the initial value of the state to be established or return the existing state that was just passed into the reducer.
In this case, the state is cart.
The actual errors here are that name and newItem don’t exist in the scope of the default case. Notice you define those in the other case blocks. You don’t need them for default
Hi!
Many thanks for your help.
I have changed my CartReducer to the following as you mentioned:
const initialCart = {};
export const cartReducer = (cart = initialCart, action) => {
switch (action.type) {
case 'cart/addItem': {
const { name, price } = action.payload;
// if the item already exists, increase the quantity by 1, otherwise set it to 1
const quantity = cart[name] ? cart[name].quantity + 1 : 1;
const newItem = { price, quantity };
// Add the new item to the cart (or replace it if it existed already)
return {
...cart,
[name]: newItem
};
}
case 'cart/changeItemQuantity': {
const { name, newQuantity } = action.payload;
const itemToUpdate = cart[name];
const newItem = {
...itemToUpdate,
quantity: newQuantity
}
return {
...cart,
[name]: newItem
};
}
default: {
return cart;
}
}
};
However, nothing appears on the screen and no message in the console. Must be something else (apart from the default value)
I copied over the files from your Gist and the corrected default to my project and checked it out. When I check the browser’s console (CTRL+Shift+J), I’m seeing the following error message:
There might have been confusion between the browser’s built-in console and the black box under the editor in the learning environment. I’m not sure what purpose the black box has in this project, but it isn’t giving you the whole story that you can see in the browser’s built-in console.
Click if you need help with the error message
The error message here can be a little misleading because it doesn’t give you a line number that you can use since it’s from the file that gets compiled in the background.
If we look closer at the message, it mentions cartSlice.js. There isn’t a reference to combineReducer in that file, so we need to think about how that file gets used. We imported cartSlice.js in store.js, so that’s where the investigation continues. There is a mention of combineReducer here. Is it being used correctly? Should it be defined?
Click for a final hint
We have the following import line:
import { createStore, combineReducers } from 'redux';
so we know the call should be combineReducers instead of combineReducer
1 Like
Wow, how a small error can break down the whole app! Thank you a lot for troubleshooting the issue.
Next time I know I have to test it directly in the console. I don’t know why I thought that the console shown in the Learning Environment would show the errors. As it was blank, I thought there was a logic error and not a typo one.
THANK YOU!!
You’re welcome!
Don’t worry, you’re not alone. During testing of the course, that black box under the editor is something I reported as having potential to be confusing since it doesn’t seem to do anything, but in other projects it can show logs.
1 Like
Hello guys, just wish somebody could help, almost everything is fine, its juts if I click on the select element of a item in the cart and try to change the quantity, won’t work, so I can just increment if I click on the “add to cart” again, but cannot decrement it!
Hi @siba1983 I had the same problem, posted about it here, got some help - turned out it was two errors where I typed slightly the wrong thing by mistake.
With this in mind, I had another look at your code to see if I could see any typos (when I looked previously, the logic was all exactly same as mine).
cartSlice.js
// Create your changeItemQuantity action creator here.
export const changeItemQuantity = (name, newQuantity) => {
return {
type: 'cart.changeItemQuantity',
payload: {name, newQuantity}
}
}
Compare the syntax of the code above (that isn’t working) to the syntax of your code below (which does work) - paying attention to the type: value.
export const addItem = (itemToAdd) => {
return {
type: 'cart/addItem',
payload: itemToAdd,
};
};
Spoiler below
On line 11 of cartSlice.js change the . to a / so it reads type: 'cart/changeItemQuantity',
Hi, could someone help me? My Code is not displaying anything and I’m not sure why.