Theo's Typesafe Cult•3y ago

What to use to manage state in T3 stack app

I want to implement a cart function for my app and was wondering what state management library to use with my app. It is made with create-t3-app

28 Replies

barry•3y ago

whatever you want zustand is my go to

Halu•3y ago

i mean, if you dont want to get held up you can simply use a composable useState with some mutation helpers. then when you run into specific problems, you have a better idea of what solutions you specifically need. for example, a simple on-demand service may be satisfied with just useState. others with limited inventory may not and need server communication to sync available stock between all clients. And you may want session persistence, so you have to store state in local storage and validate that their stock claim hasnt expired in their next session. theres many ways to build something as simple as a cart. its hard to say what you specifically will need until you run into issues or define things more rigorously

adityaOP•3y ago

so theres no library in the t3 bundle for this

Halu•3y ago

theres no universal answer for this

adityaOP•3y ago

I'll have to go with zustand yes i understand now thanks for explaining!!

barry•3y ago

no we don't want to choose this for you too many options

adityaOP•3y ago

ohh i was thinking like there is some library that fits w the libraries of t3

Leonidas•3y ago

There are a lot - there is no objective best solution. Many people prefer different solutions. In case you have never had this issue before stick with zustand or plain react context

adityaOP•3y ago

yeah ig i have to learn zustand

esponges•3y ago

It's very simple if you've ever Redux, and if you don't, it still easy I have a test app for e-commerce with suztand if you want to take a look at https://github.com/esponges/t3-ecommerce

adityaOP•3y ago

oh wow thats really helpful thanks

esponges•3y ago

my pleasure

adityaOP•3y ago

i was looking through your app its nicely done i have a few questions... 1. Ive seen the tuts on zustand where I only have to create a store file but you have made 2 files(useCartItems and useCartStore) to my understanding the first one is for accessing the cart info(?) and the second is for updating or editing the cart 2. I was implementing the remove items from cart feature but following the code I cannot get it to work

Unknown User•3y ago

Message Not Public

esponges•3y ago

useCartItems is a custom hook that gets the cart items from useCartStore which is the actual Zustand slice :).

adityaOP•3y ago

can you tell me how can i delete the element from state

esponges•3y ago

hey, thanks for reminding me of that functionality, unfortunately atm I'm a bit short of time but maybe later this afternoon I will be able to add that functionality.

adityaOP•3y ago

yeah sure if you could explain the code a lil bit it would be helpful if not its okay you're v helpful

esponges•3y ago

that method is yours right you are overcomplicating it

  removeFromCart: (productId: string) => {
    set((state) => {
      const updatedCart = {
        items: {
          ...state.items,
        },
      };

      delete updatedCart.items[productId];

      // persist cart to local storage
      localStorage.setItem('cart', JSON.stringify(updatedCart.items));

      return updatedCart;
    });
  }

  removeFromCart: (productId: string) => {
    set((state) => {
      const updatedCart = {
        items: {
          ...state.items,
        },
      };

      delete updatedCart.items[productId];

      // persist cart to local storage
      localStorage.setItem('cart', JSON.stringify(updatedCart.items));

      return updatedCart;
    });
  }

since the items is an object, you would just have to find the key for that object and delete it e.g

const items = {
  'foo': {
    // product data
    quantity: 1
  },
  'bar': {
    // product data
    quantity: 2
  },
}

// remove the key 'foo' from the items object

delete items['foo']

const items = {
  'foo': {
    // product data
    quantity: 1
  },
  'bar': {
    // product data
    quantity: 2
  },
}

// remove the key 'foo' from the items object

delete items['foo']

JLN•3y ago

There is also a persist middleware from zustand to save and populate your store from some storage e.g. localstorage https://docs.pmnd.rs/zustand/integrations/persisting-store-data So you dont have to call localstorage urself

Zustand Documentation

Zustand is a small, fast and scalable bearbones state-management solution, it has a comfy api based on hooks

esponges•3y ago

Hey that's nice! I'll check it out 👀

JLN•3y ago

pretty straight forward, i like it alot

adityaOP•3y ago

I was making it so that the quantity if item decreases by one but i see where i was wrong thanks!!

barry•3y ago

You shouldn’t use delete Use filter

esponges•3y ago

why not? it's also an object, not an array

barry•3y ago

☠️ you’re using an object as a cart? Just don’t

esponges•3y ago

I'm using an object that contains unique products, that way I just change the quantities of each key, what's wrong with that? Any explanation of why?

barry•3y ago

because that's hard coding the hell out of it say you now want to make a new product, you have to go find that object and add it + add the product's page with array you just need the product's page

Gaming

Programming

What to use to manage state in T3 stack app