Persistent shopping basket using Redux Toolkit in an online store app

Ecom
1

I’m working on an online store and need help keeping the cart items saved when users refresh the page. I’ve set up a slice for managing cart actions but I’m not sure how to make it persistent. I’ve heard about redux-toolkit-persist. Is that what I should use? Here’s a simplified version of my current setup:

import { createSlice } from '@reduxjs/toolkit'

const cartSlice = createSlice({
  name: 'basket',
  initialState: { items: [], isOpen: false },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    },
    updateQuantity: (state, action) => {
      const { id, change } = action.payload;
      const item = state.items.find(i => i.id === id);
      if (item) item.quantity += change;
    },
    toggleBasket: state => {
      state.isOpen = !state.isOpen;
    }
  }
});

export const { addItem, removeItem, updateQuantity, toggleBasket } = cartSlice.actions;
export default cartSlice.reducer;

How can I make this persist across page reloads? Any tips or code examples would be super helpful!

2

Indeed, Redux Toolkit’s persistence capabilities are quite robust for maintaining cart state across page reloads. To implement this, you’ll need to utilize the redux-persist library in conjunction with your existing setup. Here’s a concise approach:

  1. Install redux-persist: npm install redux-persist

  2. Modify your store configuration to include persistence:

import { configureStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import cartReducer from './cartSlice'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, cartReducer)

export const store = configureStore({
  reducer: { cart: persistedReducer },
})

export const persistor = persistStore(store)
  1. Wrap your app with PersistGate:
import { PersistGate } from 'redux-persist/integration/react'

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* Your app components */}
      </PersistGate>
    </Provider>
  )
}

This configuration should effectively maintain your cart state across page refreshes.

3

hey grace! redux-toolkit-persist is a solid choice for keeping ur cart data around. it’s pretty easy to set up too. just wrap ur root reducer with persistReducer and use persistStore when creating ur store. then add PersistGate to ur app component. that should do the trick! lmk if u need more help

4

Hey Grace_42Read, sounds like you’re on the right track with your online store app! :shopping_cart:

I’m curious, have you considered using localStorage as an alternative to redux-persist? It might be a simpler solution for your needs.

You could modify your existing slice to save and load from localStorage like this:

const cartSlice = createSlice({
  name: 'basket',
  initialState: JSON.parse(localStorage.getItem('cart')) || { items: [], isOpen: false },
  reducers: {
    // ... your existing reducers ...
  }
});

// Then, subscribe to state changes:
store.subscribe(() => {
  localStorage.setItem('cart', JSON.stringify(store.getState().cart))
});

What do you think about this approach? Have you tried anything like this before?

Also, I’m wondering how many items you expect users to have in their cart typically? That might affect which solution works best for you.

Let me know if you want to explore this idea further!