CODEWITHSUNDEEP
reactjsnext.jslocal-storageuse-reducer
Ye Min Htun
Ye Min Htun

Reputation: 3

localstorage is not defined in Next js to use in useReducer

I'm having a problem accessing to localstorage in third argument of useReducer as lazy-initial to get shopping cart items from localstorage. Can anyone help with with this please? I need to access localstorage so that shopping cart which is 'MedicineToBuy' remain the same after page reload.

import React, { useState, createContext, useReducer, useEffect } from 'react'
import { cartReducer } from 'reducers/CartReducers'

export const CartStates = createContext()

export const CartProvider = props => {
  
  const [cartVisibile, setCartVisible] = useState(false)
  const [medicineToBuy, dispatch] = useReducer(cartReducer, [],function(){
    const storageData = localStorage.getItem('Cart');
    return storageData ? JSON.parse(storageData) : [];
  })

  useEffect( () => {
    localStorage.setItem('Cart', JSON.stringify(medicineToBuy))
  }, [medicineToBuy] )

  const value = {
    visibility: [cartVisibile, setCartVisible],
    itemsInCart: [medicineToBuy],
    dispatch: dispatch,
  }

  return <CartStates.Provider value={value}>{props.children}</CartStates.Provider>
}

Upvotes: 0

Views: 164

Answers (1)

adrianmanduc
adrianmanduc

Reputation: 886

Your componentent is most likely rendered server side where window is not available, therefore local storage or any other browser APIs cannot be used.

You could check if window is defined before using local storage:

  const [medicineToBuy, dispatch] = useReducer(cartReducer, [],function(){
    const storageData = typeof window !== 'undefined' ? localStorage.getItem('Cart') : null;
    return storageData ? JSON.parse(storageData) : [];
  })

You could extract this into a re-usable variable and use it everywhere you need to access a browser API:

export const IS_CLIENT = typeof window !== 'undeinfed';

Important: this will work only when the code runs client side.

Upvotes: 1

Related Questions