score:0
in productreducer file you should push the item into state.cartitems
if (!producttoadd) {
producttoadd = products.find(obj => obj.id === action.id);
count = 1;
add row-> state.cartitems.push(producttoadd);
}
in this approach, if you don't enter a specified quantity of the product, it will be automatically placed to the cart as one item.
score:1
it looks like the way you map the action to props does not match the actual usage of the function.
you map it like this:
addtocart: (id)=>{dispatch(addtocart(id))}
the action just passes its parameter as payload
meaning payload
is equal to id
:
export const addtocart= payload =>({
type: add_to_cart,
payload
});
but you expect the payload to be an object like this:
const { id } = action.payload;
you need to make them match. either pass the action an object:
addtocart: (id)=>{dispatch(addtocart({id}))}
or use the payload as the id:
const id = action.payload;
the result of the code as is, is that id
is undefined, meaning no producttoadd
.
Source: stackoverflow.com
Related Query
- not able to add items to cart from product page using react redux
- items do not map until page refresh - using firestore, react and redux
- Not able to access detail information from Api using React Router not rendering on the page
- React Router Link with params not reloading page with new data from componentDidMount and Redux axios data fetching
- Not able to set state in React Hooks using data received from Axios
- Not able to click list child element from side menu using react testing library
- Not able to add todo in a todo-list using react and redux. What am I doing wrong?
- Using useMappedState from Redux React Hooks, component not re-rendered after API response
- React remove items from the shopping cart at index using the useCallback hook
- Identify each item using keys from array data for add cart button. Reactjs. Redux
- I am not able to retrieive data from my json file using react
- React Firebase Cart Add Items Cart Reducer not working
- Spread operator is not working on Add To Cart function in react redux
- loading Data fetched from the API after refreshing page in react using redux
- React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
- Prevent react component from rendering twice when using redux with componentWillMount
- How to execute store.unsubscribe from useEffect using React hooks and Redux
- How do I access data returned from an axios get to display on a web page using react js?
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React Redux Axios: POST Request not receiving credentials from redux state
- React Native - NavigationActions.navigate() not navigating from within redux
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to add page transitions to React without using the router?
- Why is this variable from the Redux store not in the `this.props` on React page?
- React app showing page with "404 the requested path could not be found" when using Apache
- How to pass data from a page to another page using react router
- Add class on focus change using Redux and React
- How to update select items based on the selection from the first select items using react
- Why is react state(array) empty inside callback function? Why is it not using the updated value from outer scope?
- Not able to move div using mousemove in react
More Query from same tag
- Images not displayed on gh-pages after deploying react app
- Darken When Hover For Button in React
- How to clear form after onChange() in Tab component (React-final-form)
- React on Rails: Can't enter text in my form input boxes
- `Cannot read property 'setState' of undefined` only inside the loop
- Calculating average difference between date() entries in an array (in ms)
- How to use mapStateToProps to get a value from the state based on a context value?
- Update the blue line to white
- How to check map has values or not react
- In React, how do I find the first item in a list that matches some criteria?
- How to avoid "React Hook useEffect has a missing dependency" and infinite loops
- How to pass props from child to map() in parent's component?
- getting error :Type '[null, Dispatch<SetStateAction<null>>]' is not assignable to type in typescript react
- React-redux connect() not subscribing to dispatched actions properly
- How can I make useEffect() optional based on props
- How can I use both jest-dom matchers and enzyme matchers in the same repo?
- ReactJS fetch full CSV
- Error while pushing to Heroku: Cannot find module 'node-linux-x64/package.json'
- add multiple node box selector on the canvas of VisJS network graph in ReactJS
- Transpiling third-party modules with create-react-app build
- Can one component receive data from two HOC?
- React Mongo select a specific field
- Rails with React app on Heroku routes don't work on refresh
- error too many re-renders. react limits the number of renders to prevent an infinite loop
- forEach() in React JSX does not output any HTML
- Material-UI: Cannot Trigger the onChangeCommitted Event During Testing
- React: receiving Uncaught Error: Objects are not valid as a React child, when trying to render an array
- Passing String with HTML entity as a prop not rendered properly in material UI
- share value from one component into another in reactjs
- React - Is there a way to check when page is done loading after route change?