"local" global state

State manager naudojimas

Situacija:

• Komponentų/hook'ų dekompozicijos metu keliams komponentams reikia state. Bet jis nereikalingas aukštesniam (išoriniams) kodui
• Iš React ribotumo , mums reikia iškelti state už komponento ribų (pvz į parent), tam kad galetume tai realizuoti keliams komponentams.

Sprendimas:

• Mes turi sukurti lokalų context tiems komponentams. Tokiu budu jie gali panaudoti state, be jo iškėlimo į kitus komponentus.

Buvo:

  graph TD;
      STATE-->APP;
      APP-->componentA;
      APP-->componentB;

Tapo:

  graph TD;
      APP-->componentA;
      APP-->componentB;
      componentB-->STATE;
      STATE-->componentA;

Context pajungimas. Provider - kad butu galima pasiekti context

• const trackModal = useTrackModal(); konteksto sukūrimas
• <trackModalContext. Provider value={trackModal}> wrapas provideris

import { createContext } from "react";
import { useTrackModal } from "../hooks/use-track-modal";

type TrackModalContext = ReturnType<typeof useTrackModal>;
export const trackModalContext = createContext<TrackModalContext | null>(null);

export function TrackModalProvider({
  children,
}: {
  children: React. ReactNode;
}) {
  const trackModal = useTrackModal();
  return (
    <trackModalContext.Provider value={trackModal}>
      {children}
    </trackModalContext.Provider>
  );
}

Context tipas

• TrackModalContext | null>(null) null reikia dėl default reikšmės

import { createContext } from "react";
import { Track } from "../../App";

type TrackModalContext = {
  close: () => void;
  createClick: () => void;
  isOpenModal: boolean;
  selectedCell: number;
  selected Track: Track;
  trackClick: (track: Track) => void;
};
export const trackModalContext = createContext<TrackModalContext | null>(null);

Context panaudojimas

export default function App() {
  return (
    <TrackModalProvider>
      <AppContent />
    </TrackModalProvider>
  )
}

Vienas komponentas (hook - modal valdymas)

• const context = useContext(trackModalContext); pasinaudojame context
• if (!context) { jeigu kontektsto nėra. throw new Error. Fail fast metodas, esant klaidai, kuo greičiau išeiti. nereikia kiekviena karta tikrinti ar context yra. Grazinamass null

import { useContext } from "react";
import {trackModalContext } from "../components/track-modal-context";

export function useTracksModalOpen() {
  const context = useContext(trackModalContext);
  if (!context) {
    throw new Error(
      "useTracksModalOpen must be used within a TrackModalProvider"
    );
  }
  return {
    createClick: context.createClick,|
    cellClick: context.cellClick,
    trackClick: context.trackClick,
  }
}

Kitas komponentas (visa logika)

import { useContext } from "react";
import { useTrack Form } from "../hooks/use-track-form";
import {trackModalContext } from "./track-modal-context";

export function TrackModal() {
  const context = useContext(trackModalContext);
  if (!context) {
    throw new Error("useTracks Modal must be used within a TrackModalProvider");
  }

const {
  cellclick,
  close,
  createClick,
  isOpenModal,
  selectedCell,
  selectedTrack,
  trackClick,
  } context;
...

local context, nes iš išorės neturi prie jo prieigos

Privalumai:

• patikimumo padidinimas
• kodo aiškumo padidinimas
• smulkmenų užslėpimas padidina perpanaudojimą. Išorinis kodas neturi prieigos prie duomenų

Trūkumai

• nepatogus konteksto naudojimas
• nepatogus provider

Perpanaudojimo pavizdys

export default function App() {
  return (
    <TrackModalProvider>
      <AppContent />
    </TrackModalProvider>
    <TrackModalProvider>
      <AppContent />
    </TrackModalProvider>
  )
}

Galima apjungti:

• kontekstas duoda didesni perpanaudojimas
• state manager patogumas