Next.js Discord

Discord Forum

redux store is not working properly on vercel

Unanswered
American Crocodile posted this in #help-forum
Open in Discord
American CrocodileOP
I recently deplyed my next js application on vercel [Here](https://notedly-nine.vercel.app/)

But my reducer logic for adding or fetching notes is not working which is defined in src/redux/noteslice

I have referred to redux docs for my redux setup
I tried viewing deployment logs and running it on localhost, but its working fine there.(along with backend APIs)

Here is my github repository : [Notedly](https://github.com/abhinav700/Notedly/tree/master)

I even tried to give initial data to the redux store using redux toolkit (code in my latest commit)

Still, state.notesdata is not gettting updated properly and when I tryiy to print it on console

5 Replies

Barbary Lion
I haven't used redux for a while so could be wrong, but do you need to return state in these reducer functions?

https://github.com/abhinav700/Notedly/blob/master/src/redux/notesSlice.ts#L46-L68
American CrocodileOP
nope. Redux docs mentions that explicitly.
Tonkinese
It might be your provider. There's no reason that I can see to attach that to a ref, and especially if it's not in a useEffect or useMemo hook that would run on the client. I can't promise I'm right, but I'd suggest moving this:
  const storeRef = useRef<AppStore>();
  if (!storeRef.current) {
    // Create the store instance the first time this renders
    storeRef.current = store();
    storeRef.current.dispatch(intializeNotes({}))
    storeRef.current.dispatch(initializeUserData({}))
  }
  return <Provider store={storeRef.current}>{children}</Provider>;

to this:
"use client";
import { useEffect, useRef } from "react";
import { Provider } from "react-redux";
import { store as _store, AppStore } from "./store";
import { intializeNotes } from "./notesSlice";
import { initializeUserData } from "./userSlice";

const reduxStateWasChecked__apply_logic_here = (): boolean => {
    return true
}

export default function StoreProvider({
    children,
}: {
    children: React.ReactNode;
}) {
    const store = _store()
    useEffect(() => {
        if (!reduxStateWasChecked__apply_logic_here()) {
            store.dispatch(intializeNotes({}))
            store.dispatch(initializeUserData({}))
        }
    }, [])
    return <Provider store={store}>{children}</Provider>;
}
Tonkinese
Also, did you try to actually build it locally? If it runs when it's built for production locally, I'd check your env variables on vercel to make sure they're in place.
@Tonkinese Also, did you try to actually build it locally? If it runs when it's built for production locally, I'd check your env variables on vercel to make sure they're in place.
American CrocodileOP
The problem was cookies.get in fetchNotes API.
Moved the cookies.get() out of trycatch block and it started working