Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,156,451 members, 7,830,236 topics. Date: Thursday, 16 May 2024 at 06:23 PM |
Nairaland Forum / Science/Technology / Programming / Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) (1362 Views)
Redux RTK Vs React Query For Fetching Data And Inifiite Scroll / Guys, I Need Help With This Reactjs Issue Please. / If You Are Good With React Hooks And Context API (2) (3) (4)
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 9:52pm On Jan 18, 2023 |
according to what qtguru is pointing out... I don't know the full build of your code... i just typed out and using console.log, but you could try this out for your original reducer. const reducer = (state, action) => { switch (action.type) { case "INCREMENT": let eachCart; eachCart = state.products.map((product) => { if (product.id === action.payload) { return { ...product, amount: product.amount + 1 }; } return product; }); return { ...state, products: eachCart }; default: return state; } }; well if nonwork... na just suggestions bye .
|
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 10:02pm On Jan 18, 2023 |
Devdevdev: it was just a suggestion since you said your number type was changing to something else which might be the cause of your issues. Number() converts a value to a number |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 10:08pm On Jan 18, 2023 |
GREATIGBOMAN: Didn't work. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 10:09pm On Jan 18, 2023 |
qtguru: I tried implementing your instruction. Still didn't work. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 10:09pm On Jan 18, 2023 |
GREATIGBOMAN: I even used parseInt, and + sign before the variable, still didn't work. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 10:11pm On Jan 18, 2023 |
Devdevdev: could u upload the the code somewhere so i can download it, will be easier just zip the file and upload to googledrive and share the link. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 10:14pm On Jan 18, 2023 |
Devdevdev: Put a debugger and see if you reach the reducer, send the project to my mail, let me run it and fix. coding by looking at image is long thing. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 10:19pm On Jan 18, 2023 |
@GreatIgboMan, do you have an email address? I'll mail the code to you and qtguru now. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 10:20pm On Jan 18, 2023 |
Devdevdev:OKEOWOADEREMI AT GMAIL DOT COM |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 10:25pm On Jan 18, 2023 |
Devdevdev:_ @ gmail. com |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 10:28pm On Jan 18, 2023 |
Devdevdev: Also here, is it not better to name it product.quantity instead product.amount since it's the quantity you are trying to increase? i'm assuming your product object will have a quantity and an amount? if your product has a quantity in its object, then there's nowhere in the code above you are actually increasing it, instead it is the amount(Price) of the product you are increasing. Maybe I'm wrong... But I don't see any correlation between the quantity& amount and how the amount should increase the quantity. Instead it's the change in quantity that should increase the total amount |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 11:22pm On Jan 18, 2023 |
qtguru: Sent |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 11:22pm On Jan 18, 2023 |
GREATIGBOMAN: Sent |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 1:40am On Jan 19, 2023 |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 5:58am On Jan 19, 2023 |
Devdevdev: This won't work, I don't have the package.json, you were supposed to send the whole project so I can install the modules and run on my end. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by truthCoder: 6:12am On Jan 19, 2023 |
Devdevdev: Share the code repository GitHub was invented for this reason. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 6:41am On Jan 19, 2023 |
truthCoder: Exactly taking too much time to fix a bug like this, we could have ironed it out with github. 3 Likes 1 Share |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by DDayve: 9:33am On Jan 19, 2023 |
A lot of stuff is wrong with your code. I don't think you should be setting the amount and total variable from the reducer page, that should be done at the Shop.jsx page. A lot needs to change from your code for it to work. With your amount variable set at the reducer page, every time you run the addOne function, your amount will refactor to 0, except you are getting your values from localStorage |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 11:45am On Jan 19, 2023 |
DDayve: What else is wrong with the code asides from the amount variable being set at the reducer page? |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by DDayve: 11:59am On Jan 19, 2023 |
Devdevdev: Let's see your action screen where you created cartItems |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 12:02pm On Jan 19, 2023 |
Devdevdev: Please, is this amount the same thing as the quantity? Like is it the quantity of the product you clicked (Add to Cart) you are trying to increase? if so then your code setup is not correct. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 1:43pm On Jan 19, 2023 |
Did you push it to Github ? this can be solved faster if shared. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 1:44pm On Jan 19, 2023 |
GREATIGBOMAN: I just watched a tutorial on git and github and just uploaded the two projects on github. This is my first time using github. https://github.com/devdevdev69 |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 1:45pm On Jan 19, 2023 |
@qtguru, i took your advice and pushed the two projects to github. You will find them on my github profile https://github.com/devdevdev69 |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 1:45pm On Jan 19, 2023 |
Devdevdev: Awesome, let me clone |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 1:46pm On Jan 19, 2023 |
Devdevdev: I emailed u what I believe is what u were trying to achieve... Attached a video. U can check it out if it's what u wanted |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 2:16pm On Jan 19, 2023 |
Devdevdev:Well. in your Global context (In context API version) just replace you reducer function with this: const reducer = (state, action) => { switch (action.type) { case "INCREMENT": let eachCart; eachCart = state.products.map((product) => { if (product.id === action.payload) { return { ...product, amount: (product.amount || 0) + 1 }; } return product; }); return { ...state, products: eachCart, amount: 0 }; default: return state; } }; in Shop.jsx in Shop.jsx add this inside the <button> tag. Add to cart ({product.amount || 0}) |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by truthCoder2: 2:34pm On Jan 19, 2023 |
is this what you are trying to achieve?
|
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 2:35pm On Jan 19, 2023 |
GREATIGBOMAN: This worked. Thanks a lot. It wasn't clicking because the amount was set to zero so adding the product.amount || 0 and telling the compiler to add 1 when the state is 0 or when there is an amount, did the trick. I also included the modification to the redux code and it worked. |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 2:36pm On Jan 19, 2023 |
@devdevdev I noticed I made some mistake in my comments, I used combinedReducer, you used createSlice, createSlice handle the type and action on it's on, so the name + reducer function is triggered, look the screenshot your code works. The payload is logged to the console, so the next part is to experiment with the Cart component and see if it reflects there
|
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 2:37pm On Jan 19, 2023 |
WIP |
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 2:39pm On Jan 19, 2023 |
truthCoder2: Yea |
Please Who Knows Laravel Mvc With Php / Things You Need To Know About Programming / I Need Contributors And Developers To Create An Altcoin
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 46 |