如何使用react context api创建像reduxt toolkit或zustand这样的全局存储？

Question

当你不想使用 redux 工具包、zustand 或其他工具，但想使用 React context api 来管理前端应用程序的全局状态时。如何使用 React context api 创建一个全局商店？

Answer 1

所以我找到了一种简单的方法来使用 React context api 和它的钩子（如

useContext

、

createContext

）创建 React 应用程序的全局存储。下面的示例使用打字稿。为了更好地理解使用打字稿反应上下文，您可以访问此链接

• 首先创建一个全局上下文提供程序并传递将使用的整个应用程序的状态

  import { createContext, useContext, Dispatch, SetStateAction, useState, PropsWithChildren} from "react";
  
  type AppState = {
    count: number,
    setCount: Dispatch<SetStateAction<number>>;
  }
  
  const AppContext = createContext<AppState| undefined>(undefined)
  
  const AppContextProvider: FC<PropsWithChildren> = ({children}) => {
   const [count, setCount] = useState<number>(0);
  
     <AppContext.Provider value={{
         count,
         setCount
      }}>
        {children}
     </AppContext.Provider>
  }
  
  const useAppStore = (): AppState => {
    const context = useContext(AppContext);
  
    if(!context){
      throw new Err('useAppStore must be called under AppContext.Provider')
     }
  
    return context;
  }
  
  return {AppContextProvider, useAppStore};
  
  

• 用

  AppContextProvider

  包装您的根应用程序组件

   <AppContextProvider>
    <App/>
   </AppContextProvider>
  
  

• 然后在您想要的组件中使用名为

  useAppStore

  的钩子。假设您正在制作一个计数器应用程序。在

  Count

  组件中，您可以执行如下操作

    import {useAppStore} from '@/store'; // add your path 
  
    const Count = () => {
  
     const {count, setCount} = useAppStore();
  
     return (
      <div>
         {count}
         <button onClick={()=> setCount(count+1)}>Count up</button>
      </div>
    )
   }