react-native - React Native - 如何更新整个应用程序的值

Question

在 api 请求中查找值并使其在整个应用程序中可用的最佳方法是什么？我需要获取未读消息的总数并在应用程序标头中显示给用户。每次更改页面时，都会发出一个新请求来更新未读消息的总数。我正在使用这样的上下文：

/** @format */

import React, { createContext, useContext, useState, useEffect, useRef } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import api from "../services/api";

const BadgeContext = createContext();

export default function BadgeProvider({ children }) {
  const [messageCount, setMessageCount] = useState(0);
  const [userLogged, setUserLogged] = useState("");

  async function getAuthUserFromStorage() {
    try {
      const dataFromStorage = await AsyncStorage.getItem("@ellot:authUserLogged");
      const authUserLogged = JSON.parse(dataFromStorage);
      setUserLogged(authUserLogged.user);
    } catch (e) {
      console.log("ERROR: ", e);
    }
  }

  useEffect(() => {
    getAuthUserFromStorage();
  }, []);

  useEffect(() => {
    const getTotalMessageNotRead = async () => {
      try {
        const response = await api.get(`/messages/total-not-read/${userLogged.id}`);
        setMessageCount(response.data.data);
        console.log("messageCount context ", messageCount);
      } catch (error) {
        console.log("Message Not Read Error: ", error);
      } finally {
        console.log("finally message not reader context", messageCount);
      }
    };
    getTotalMessageNotRead();
  }, []);

  async function resetCountMessage() {
    setMessageCount(0);
  }

  const store = {
    messageCount,
    resetCountMessage,
  };

  return <BadgeContext.Provider value={store}>{children}</BadgeContext.Provider>;
}
export function useBadge() {
  const context = useContext(BadgeContext);
  const { messageCount, resetCountMessage } = context;
  return { messageCount, resetCountMessage };
}

标签： react-nativeglobal-variablesuse-stateuse-contextcreatecontext