Converting Zustand code to Context API state

Question

I have this piece of code written in typescript for zustand state management library

export const useStore = <T, F>(
  store: (callback: (state: T) => unknown) => unknown,
  callback: (state: T) => F,
) => {
  const result = store(callback) as F;
  const [data, setData] = useState<F>();

  useEffect(() => {
    setData(result);
  }, [result]);

  return data;
};

how can I convert this piece of code to normal Context API code ?

Answer 1

Create an StoreContext.tsx

import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';

interface StoreContextType<T> {
  state: T;
  setState: React.Dispatch<React.SetStateAction<T>>;
}

const StoreContext = createContext<StoreContextType<any> | undefined>(undefined);

export const StoreProvider = <T,>({ children, initialState }: { children: ReactNode; initialState: T }) => {
  const [state, setState] = useState<T>(initialState);

  return (
    <StoreContext.Provider value={{ state, setState }}>
      {children}
    </StoreContext.Provider>
  );
};

create a custom hook

export const useStore = <T, F>(callback: (state: T) => F): F => {
  const context = useContext(StoreContext);

  if (!context) {
    throw new Error('useStore must be used within a StoreProvider');
  }

  const { state, setState } = context as StoreContextType<T>;
  const [data, setData] = useState<F>();

  useEffect(() => {
    const result = callback(state);
    setData(result);
  }, [state, callback]);

  return data as F;
};

wrap the index file with store provider

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StoreProvider, initialState, AppState } from './StoreContext';

ReactDOM.render(
  <React.StrictMode>
    <StoreProvider<AppState> initialState={initialState}>
      <App />
    </StoreProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

use the context in your relevant componenet

type AppState = {
  count: number;
};

const initialState: AppState = {
  count: 0,
};

const MyComponent = () => {
  const count = useStore((state: AppState) => state.count);

  return <div>Count: {count}</div>;
};