What would you use for a global state management? - Initalization from API needed
Hello,
So long story short, I would like to have a global state management for my advertisements and want to display in multiple components(maybe even in the sidebar). This ads can have dynamic styling(like row-span-2, col-span-2 in a grid case).
The initial advertisements should come from server so the initialization need to be a fetch call (or something else).
What do you guys would recommand? My approach with Zustand failed(I'm still trying). This state should have a nextAdId too, which represents which ad should be rendered next.
Thanks
demo-repo(the code quality is bad): https://github.com/DZsolt01/nextjs-zustand-demo
GitHub
GitHub - DZsolt01/nextjs-zustand-demo: Zustand Demo
Zustand Demo. Contribute to DZsolt01/nextjs-zustand-demo development by creating an account on GitHub.
Solution:Jump to solution
I think this logic would ideally not be in a frontend at all. Basically you'd have endpoints like
getSidebarAds
, getSliderAds
, and for the grid that's dynamic, it'd be something like getContent
which would return an array of objects with type: "item" | "ad"
. You could then use this array to render either BusinessCard
or Advertisement
.
And if you can handle it on BE, you can just look at all the available ads, and ensure these endpoints don't return duplicates....37 Replies
This looks like something react-query would be ideal for. You'd just have to write the fetch function so it returns correct data for rendering and handle the
nextAdId
somewhere (could be useState
, context
, whatever).
But zustand should be usable too. What issue did you ran into with the current implementation?The main problem which remained after trying a lot is not getting the good advertisment. Every time get only the advertisements[0] on stlyes
![No description](https://cdn.answeroverflow.com/1248969756430569523/image.png)
The second advertisment should look different
I updated the demo:
https://github.com/DZsolt01/nextjs-zustand-demo
GitHub
GitHub - DZsolt01/nextjs-zustand-demo: Zustand Demo
Zustand Demo. Contribute to DZsolt01/nextjs-zustand-demo development by creating an account on GitHub.
I'm unable to run the code, because
ui/card
is not commited. But if you're having issues with styling, I seems like you're trying to generate tailwind classes dynamically. This won't work, as tailwind generates CSS based on what's already included. (Docs)
You should try using style
prop for your dynamic styles.I added the classes in tailwind config (safeList) so the classes are added, and the classNames works fine
I hope now it's good
The classes are applied to the className, the problem is when I add a new Advertisment in BusinessCardWrapper.tsx the advertisment passed to it is always advertisments[0]
![No description](https://cdn.answeroverflow.com/1248973381911449713/image.png)
I'm still confused by what are you trying to achieve. Because right now, you're rendering the same advertisement twice. But something tells me you want to render first ad before business card 3 and second in front of business card 7.
Also, the current code increases the
nextAdvertisement
until it's 2, which makes it not render any ad.
I think this could solve your problem?
The end result should be this:
![No description](https://cdn.answeroverflow.com/1248976770749698090/337856510-79f8a5fd-3d63-47a1-af7b-7bceea8813f0.png)
So there should be 2 blocks(ads) which are different from the cards
Sorry for my bad english 😦
The basic idea would be to get all the ads from server, store it, and when I want to render an ad anywhere in the application I can do that, but the ad should be the next one in the list so I don't render the same ad
That how it looks for me..
![No description](https://cdn.answeroverflow.com/1248977155862560788/Screenshot_2024-06-08_at_14.29.03.png)
Sorry, I just got back to PC
(With the new code)
I'm checking right now
Can you push to the github repo?
It's working
Thanks!
Do you have any advice, where I can improve the code?