I am trying to create a webpage using React. used redux for data access.
My problem is that when I click on any product, it shows me a perfect page, but if I go back and then again click on another product, my page shows me the data of the new product, but it does not change the photo height in CSS.
product 1product 2(its doesnt changing first image height)
export const productDetailsReducer = (state = { product: {} }, action) => {
switch (action.type) {
case PRODUCT_DETAILS_REQUEST:
return {
loading: true,
...state <------i am sending the previous state
}
case PRODUCT_DETAILS_SUCCESS:
return {
loading: false,
product: action.payload,
}
case PRODUCT_DETAILS_FAIL:
return {
loading: false,
error: action.payload
}
case CLEAR_ERRORS:
return {
...state,
error: null
}
default:
return state
}
You must first iterate, and then provide the changes.
return {
...state <------ iterate
loading: true, <----- set new values
}
In addition, you should always iterate, just to make sure, you're not changing the whole state.
export const productDetailsReducer = (state = { product: {} }, action) => {
switch (action.type) {
case PRODUCT_DETAILS_REQUEST:
return {
...state
loading: true,
}
case PRODUCT_DETAILS_SUCCESS:
return {
...state,
loading: false,
product: action.payload,
}
case PRODUCT_DETAILS_FAIL:
return {
...state,
loading: false,
error: action.payload
}
case CLEAR_ERRORS:
return {
...state,
error: null
}
default:
return state
}