Refactoring Context to Zustand - How can I initialize a store property with a hook call?

[jestrickler]

I developed a useOauth2 hook where I pass in some env configuration and it gives me back some auth related functions and components: { Callback, login, logout, ...}. I store this in a Context and it's available as I need it:

import React, { createContext, useContext } from 'react'
import { useOauth2 } from 'react-oauth2'
import { env } from '../helpers'

const AuthContext = createContext()

const AuthProvider = ({ children }) => {
  const auth = useOauth2({ ...env })
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
}

const useAuth = () => useContext(AuthContext)

export { AuthProvider, useAuth }

So I had a bunch of Contexts including this one wrapping my App, and I've been refactoring to use Zustand, but the auth property has to be initialized in a functional component, or you get 'Error: Invalid hook call'.

I could create a setter and initialize it from a component, but it would render uninitialized the first time through, then call the useEffect to initialize, and I would have to do some refactoring to check that the items were initialized before using, which I don't like as much as the Context where they're immediately available. Is there another way to get this initialized on the store?

[dai-shi]

I would also like to hear from others how they use zustand store for auth state.

From the lib perspective, what you are trying to has a mismatch.
useOauth2 provides a state and AuthContext provides a dependency injection.
So you can't use zustand store only to replace AuthContext. You want to replace both useOauth2 and AuthContext altogether. oauth2 should have a vanilla (non-react) api.

Is there another way to get this initialized on the store?

You could, however, create a zustand store in a component (instead of at module level): https://github.com/pmndrs/zustand#react-context

but it would render uninitialized the first time through

It's probably unavoidable if you need to use useOauth2 as is and zustand store at module level.

[igortas]

@dai-shi How u can achieve this, if u are using zustand with redux middleware?

const store = useContext(StoreContext);
// How to use the store variable?
export const useSomeStoreHook = create(
  redux(reducer, initialState)
);

[dai-shi]

I'm not sure if I get your question correctly, but you basically create a store and pass it via props. The redux middleware is used at the creation and not after using useContext.

[igortas]

@dai-shi

import { create } from 'zustand';
import { redux } from 'zustand/middleware';

initialWorkspaceState: WorkspaceState = {
  selectedWorkspace: null,
};

function workspaceReducer(state: WorkspaceState, action: WorkspaceAction) {
  switch (action.type) {
    case 'WORKSPACE/SET_WORKSPACE': {
      return { ...state, selectedWorkspace: action.payload };
    }
    default:
      return state;
  }
}

export const useWorkspaceStore = create(
  redux(workspaceReducer, initialWorkspaceState));

Here something from a codebase, we are using it like this, how I can apply useContext now, because I like to add providers to some shared components, and still continue using useWorkspaceStore in different components as I'm doing now:

  const setSelectedWorkspace = useWorkspaceStore((state) => state.dispatch);
  const selectedWorkspace = useWorkspaceStore(
    (state) => state.selectedWorkspace
  );

[dai-shi]

It should be something like this:

import { createContext, useContext } from 'react';
import { createStore, useStore } from 'zustand';
import { redux } from 'zustand/middleware';

const workspaceStore = createStore(redux(workspaceReducer, initialWorkspaceState));
const StoreContext = createContext();

  <StoreContext.Provider value={workspaceStore}>...</StoreContext>

  const store = useContext(StoreContext)
  const setSelectedWorkspace = useStore(store, (state) => state.dispatch);
  const selectedWorkspace = useStore(
    store,
    (state) => state.selectedWorkspace
  );

[rameshkunwar]

@jestrickler Came across almost similar problem. How did you manage to fix this issue gracefully? Is there any good way to do it?

[jestrickler]

I didn't integrate it with Zustand. I moved the Context from the App to the Library and presented it as AuthProvider that wraps the app that uses the Auth library. It seems a common pattern like react-query's QueryClientProvider which I'm also using.