External api for async inital state in NextJs14, while using createStore with contextAPI. #2488

strizer9 · 2024-04-13T08:55:47Z

strizer9
Apr 13, 2024

I want to setup my store with some APIs, in NextJs 14.
Following this for nextJs setup - https://docs.pmnd.rs/zustand/guides/nextjs
Similar discussion - #676
edited - stackblitz link - https://stackblitz.com/edit/nextjs-spgsd2?file=stores%2Fcounter-store.ts
Below code isnt working, I have tried something like in counter-store-provider.tsx file -
getData().then((data) => useStore.setState({ data.id}))

// src/stores/counter-store.ts
import { createStore } from 'zustand/vanilla'

export type CounterState = {
  count: number
  loading: boolean
}

export type CounterActions = {
  decrementCount: () => void
  incrementCount: () => void
}

export type CounterStore = CounterState & CounterActions

export const initCounterStore = async (): Promise<CounterState> => {


  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data)
    return {
      count: data.id,
      loading: false,
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return defaultInitState
  }
}

export const defaultInitState: CounterState = {
  count: 10,
  loading: true,
}

export const createCounterStore = (
  initState: CounterState = defaultInitState,
) => {
  return createStore<CounterStore>()((set) => ({
    ...initState,
    decrementCount: () => set((state) => ({ count: state.count - 1 })),
    incrementCount: () => set((state) => ({ count: state.count + 1 })),
  }))
}