score:1
issue
the changeamount
is changing a "global" amount value, which seems more like a total item count than anything else.
solution
the amount
and total
seem to be derived state, so they should just be computed when the cart
is updated. i suggest you simply use the addtocart
action to add a product and move the logic of determining if it's already in the cart into the reducer. create a "cartitem" object to hold the product detail and the quantity.
update the reducer function
const initialsate = {
products: {},
cart: [],
total: 0,
}
export function productreducer(state = initialsate, action) {
switch(action.type) {
case change_products:
return {
...state,
products: action.payload,
}
case add_to_cart:
const item = action.payload;
const isincart = state.cart.some(({ id }) => id === item.id);
let nextcart;
if (isincart) {
nextcart = state.cart.map(cartitem => cartitem.id === item.id ? {
...cartitem,
quantity: cartitem.quantity + 1,
} : cartitem);
} else {
nextcart = [...state.cart, { ...item, quantity: 1 }];
}
return {
...state,
cart: nextcart,
total: nextcart.reduce((total, { price, quantity }) => total + price * quantity, 0),
}
default:
return state
}
}
now you have a cart state that includes the product details and a quantity, so the amount
state isn't necessary.
adjust your ui accordingly to display the item quantity when mapping the cart
state in cart
instead of the passed quantity
prop (that is also no longer relevant).
{!!cart && cart.length > 0 && cart.map(product =>
<section key={product._id} >
<h3>productos en tu carrito</h3>
<img src={product.productpictures} />
<p>price={product.price * product.quantity}</p> // <-- update price computation
<p>prodname={product.name}</p>
<p>cantidad:{product.quantity}</p> // <-- display product quantity
</section>
)}
Source: stackoverflow.com
Related Query
- How to create a specific React or Redux state for referencing individual product quantities?
- How to wait for a Redux action to change state from a React component
- How can I initialize Redux state for React component on its creation?
- How to dynamically create button for calling specific action using map array in react
- How to use React Redux state for conditionally showing and Disabling a Button
- How to wait for redux state change and then render page in React
- How to set state at the server for data from API using react redux
- How to set state for individual state variable in react + typescript?
- How to return text for an individual correct or wrong answer state in React
- How to Update specific slice of redux state in React
- how to set a loading state for react js with redux
- How to create Expandable View for Product Details in React Native?
- How can I change css for the React code depending on the Redux state (true or false)
- How can I create a parent component for specific pages (to be able to add react context inside parent)?
- How to create unique keys for React elements?
- How to listen for specific property changes in Redux store after an action is dispatched
- React & Jest, how to test changing state and checking for another component
- How do I create a TypeScript type definition for a stateless React component?
- How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras
- how to create React search filter for search multiple object key values
- Redux React create initial state from API
- How do I use local state along with redux store state in the same react component?
- React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?
- No need for state in React components if using Redux and React-Redux?
- how to type state and dispatch for useReducer - typescript and react
- How to change PublicPath for Create React App in Dev Environment
- How can I create a progress bar for an API request in React Native?
- How to make React input onChange set state only after onChange stops firing for set time?
- How can I search for a component with specific key in React Developer Tools?
- How to make a React component setState() based on a Redux state change?
More Query from same tag
- Footer overlapping content when trying to make it stay at the bottom of the page
- How to limited the countries list in npm react-phone-number-input package
- How to insert link for hashtags and mentions in react quill?
- React Router with Material UI
- How to use CSS Modules with webpack in React isomorphic app?
- React: Dropdown not closing on tap outside
- How to style a checkbox after it is checked?
- Consistent url routing on client side React app served from Express
- Generate coverage with Mocha and Istanbul
- Meteor react render subscribe
- How to call a function method in a component class render method? getting Uncaught TypeError: Cannot read property 'value' of null in React
- onClick in button tag is not working in react component
- How to initialize a Localstorage?
- React- Filter array based on search and dropdown values
- Jest mocked spy function, not being called in test
- Accordion with checkbox in panel header
- Changing the default style for a Navigator.NavigationBar (title)
- Can't apply styles to Textfield using className in materi-ui latest version V1.0.0-beta.26
- React Login page getting focused on 'password' when loading the page instead of 'username'
- How to add Adsense to a website built with GatsbyJS?
- how to stop react-p5-wrapper running in background
- How to initate post request in React without mounting a form?
- How to let a function run after react component construct?
- Multiple copies of React in my Application
- Why can't I pass "directory" as component prop?
- Piece of state changes in parent component but not in child components React
- How to properly inject fetched API response into a Table
- How to use Async await without assigning to variable? to avoid value that never used
- Navigate to plain HTML page from react page
- fetch API in react sends empty body