Bainistíocht Stáit i bhFrithghníomh: Sampla Praiticiúil

Is é React an creatlach chun feidhmchláir dhinimiciúla ar thaobh an chliaint a thógáil do go leor forbróirí. Tagann nádúr dinimiciúil na bhfeidhmchlár seo ón tsolúbthacht agus ón liosta sínte cumais agus gnéithe is féidir ar thaobh an chliaint a chuir ar chumas na bhforbróirí feidhmchláir lán-chuimsitheacha a thógáil a luchtú ar an mbrabhsálaí i gceann soicind, rud nach raibh ann. féideartha (nó an-deacair) i laethanta an ghréasáin statach.

Leis an leathnú seo ar fhéidearthachtaí, tháinig coincheap na bainistíochta stáit, de réir mar a mhéadaíonn castacht in iarratais ar thaobh na gcliant, fásann an gá le stát áitiúil a choinneáil chun bheith ina bac ann féin mura láimhseáiltear é i gceart agus go gceaptar é le hinscálaitheacht.

Thug go leor creataí aghaidh ar an tsaincheist seo, ag leanúint cineálacha cur chuige éagsúla agus ag díriú ar thacair éagsúla fo-fhadhbanna, is é sin an fáth go bhfuil sé tábhachtach tuiscint ardleibhéil a bheith ann ar éiceachóras an chreata rogha chun riachtanais gach feidhmchláir a mheasúnú agus an cur chuige ceart a úsáid ina dhiaidh sin. méadracht. Tabharfaidh an t-alt seo forbhreathnú gairid duit ar na saincheisteanna coitianta bainistíochta stáit agus déanfaidh sé iarracht cineálacha cur chuige éagsúla a thabhairt isteach (useState, Context API) mar fhreagra air. Cé go gcuirfidh an t-alt seo réitigh iolracha i láthair, ní dhíreoidh sé ach ar dhúshláin ar scála níos lú, clúdóimid ábhair níos forbartha sna hailt atá le teacht.

Sreabhadh Oibre Fíordheimhnithe

Is féidir an cód a léirítear tríd an alt a fháil anseo.

Is féidir rochtain a fháil ar nasc réamhamharc beo anseo.

Déan machnamh ar an gcás ina gcuirimid an próiseas fíordheimhnithe le haghaidh iarratas React i bhfeidhm.

Mar a léirítear sa GIF thuas, ba mhaith linn ligean d’úsáideoirí logáil isteach nó clárú lenár n-iarratas ag baint úsáide as dintiúir. Má cuireadh dintiúir bhailí ar fáil, déanfar an t-úsáideoir a logáil isteach, seolfaidh an feidhmchlár go huathoibríoch chuig an leathanach baile agus is féidir leis an úsáideoir dul ar aghaidh leis an bhfeidhmchlár a úsáid.

Mar an gcéanna, Má logálann an t-úsáideoir amach, beidh na hacmhainní leathanach baile a chosaint taobh thiar de logáil isteach, beidh an leathanach logála isteach an t-aon leathanach inrochtana ag an úsáideoir.

Ag smaoineamh ar an sreabhadh oibre seo i dtéarmaí cur i bhfeidhm, bheadh ​​​​príomh-chomhpháirt againn darb ainm App, déanfaidh an chomhpháirt App an t-úsáideoir a atreorú chuig ceann amháin de dhá leathanach: Baile nó Logáil isteach, is é an staid reatha úsáideora (logáilte isteach, logáilte amach) a chinnfidh cé acu leathanach a atreoraítear an t-úsáideoir chuige, ba cheart go spreagfadh athrú ar staid reatha an úsáideora (mar shampla athrú ó logáilte isteach go logáil amach) atreorú láithreach chuig an leathanach comhfhreagrach.

Mar a léirítear sa léaráid thuas, ba mhaith linn go mbreithneoidh an chomhpháirt App an staid reatha agus gan ach ceann amháin den dá leathanach a sholáthar - Baile nó Logáil isteach - bunaithe ar an staid reatha sin.

Má tá an t-úsáideoir ar neamhní, ciallaíonn sé nach bhfuil aon úsáideoir fíordheimhnithe againn, mar sin déanaimid nascleanúint go huathoibríoch chuig an leathanach logála isteach agus cosnaíonn muid an leathanach baile le rindreáil choinníollach. Má tá an t-úsáideoir ann, déanaimid a mhalairt.

Anois agus tuiscint mhaith againn ar cad ba cheart a chur i bhfeidhm, déanaimis iniúchadh ar roinnt roghanna, ach ar dtús déanaimis ár dtionscadal React a bhunú,

Tá feidhmchlár inneall samplach san repo tionscadail a úsáidfimid chun an taobh tosaigh a chur i bhfeidhm (ní rachaimid isteach ann mar ní hé seo an príomhfhócas anseo ach coinníodh an cód simplí d'aon ghnó mar sin ní bheidh am deacair agat leis )

Tosaímid trí na leathanaigh agus na comhpháirteanna seo a leanas a chruthú:

• Leathanach Baile

• Leathanach Logáil Isteach

• EditUser Leathanach

• Comhpháirt Navbar

• Comhpháirt UserDropdown

Teastaíonn nascleanúint chuí ó fheidhmchlár React le leathanaigh iolracha, chun gur féidir linn an react-ródaire-dom a úsáid chun comhthéacs ródaire brabhsálaí domhanda a chruthú agus bealaí éagsúla React a chlárú.

yarn add react-router-dom

Tá a fhios againn gur fearr le go leor léitheoirí na ranganna teagaisc a leanúint, mar sin seo an teimpléad tosaigh chun tú a chur ar an eolas. Úsáideann an brainse tosaithe seo DaisyUI le haghaidh comhpháirteanna réamhshainithe TailwindCSS JSX. Áiríonn sé gach comhpháirt, leathanach agus an ródaire atá socraithe cheana féin. Má tá tú ag smaoineamh ar leanúint leis an rang teagaisc seo, sreabhadh an údair ar fad a thógáil leat féin agus céimeanna simplí á leanúint agat, cuir tús leis an stór ar dtús. Tar éis duit an stór a fhorchur, clón é agus tosaigh ón start-herebranch:

git clone git@github.com:<your-username>/fullstack-resourcify.git

Nuair a tharraingíonn tú an brainse tosaithe-anseo:

• Oscail an tionscadal leis an eagarthóir cód is fearr leat

• Athraigh an t-eolaire go frontend/

• Suiteáil spleáchais: snáth

• Tosaigh freastalaí forbartha: snáth dev·

Ba cheart go mbeadh cuma mar seo ar an réamhamharc:

Athróg stáit is ea an t-ainm a thugtar sa Navbar – ar an taobh uachtarach ar dheis – atá sainmhínithe sa phríomh-chomhpháirt App. Cuirtear an t-athróg chéanna ar aghaidh chuig an Nascbharra agus chuig an leathanach baile. Déanann an fhoirm shimplí a úsáidtear thuas nuashonrú iarbhír ar an athróg stáit “ainm” ón gcomhpháirt EditPage.

Cuirfear an dá chur chuige a chuirtear i láthair thíos isteach i sonraí an chur chun feidhme:

An Chéad Chur Chuige: useState

úsáidStáit()

Tá useState ar cheann de na crúcaí React is coitianta a úsáidtear, ceadaíonn sé duit staid a chruthú agus a shóchán i gcomhpháirt React Functional. Tá cur i bhfeidhm an-simplí ag an gcomhpháirt useState agus tá sé éasca le húsáid: chun staid nua a chruthú, ní mór duit useState a ghlaoch le luach tosaigh do stáit agus cuirfidh an hook useState eagar ar ais ina bhfuil dhá athróg: is é an chéad cheann an stát athróg is féidir leat a úsáid chun tagairt a dhéanamh do do staid, agus an dara ceann d'fheidhm a úsáideann tú chun luach an stáit a athrú: simplí go leor.

Cad faoi go bhfeicimid é sin i ngníomh? Athróg stáit is ea an t-ainm a thugtar sa Navbar – ar an taobh uachtarach ar dheis – atá sainmhínithe sa phríomh-chomhpháirt App. Cuirtear an t-athróg chéanna ar aghaidh chuig an Nascbharra agus chuig an leathanach baile. Déanann an fhoirm shimplí a úsáidtear thuas nuashonrú iarbhír ar an athróg stáit “ainm” ón gcomhpháirt EditPage. Is é bun an líne seo: croí-chrúca é useState a ghlacann le staid tosaigh mar pharaiméadar agus a thugann ar ais dhá athróg a bhfuil dhá luach acu, an t-athróg stáit ina bhfuil an staid tosaigh, agus feidhm shocraithe don athróg stáit chéanna.

Brisfimid síos é, agus féachaimis conas a cuireadh é sin i bhfeidhm ar an gcéad dul síos.

1. Athróg stáit “ainm” a chruthú:

./src/App.jsx

import { useState } from "react";

function App() {
const testValue = "CLA";
 //using the useState hook to create a state variable out of an initial value passed as an argument
 const [name, setName] = useState(testValue);
 console.log(`Rendering: ${name}`);

 return (...)};

Moltaí

Tá fearais ar cheann de na bloic thógála bhunúsacha de chomhpháirt imoibrithe, go coincheapúil, má cheapann tú go bhfuil comhpháirt feidhme React mar fheidhm Javascript, ansin ní bhíonn fearais níos mó ná paraiméadair na feidhme, is féidir le fearais le chéile agus an duán useState creat soladach a thairiscint duit chun staid a bhainistiú thar fheidhmchlár simplí React.

Cuirtear frapaí imoibrithe ar aghaidh mar tréithe do chomhpháirteanna saincheaptha. Is féidir tréithe a ritheadh ​​mar fhearais a scrios ó réad na bhfearas nuair a ghlactar leis mar argóint, cosúil leis seo:

Fearais ag dul thar fóir

<Routes>
  <Route path="/" element={<Home name={name} />} /> // Passing name as a prop to
  Home Component
  <Route
    path="/user"
    element={<EditUser name={name} setName={setName} />} // passing both name and setItem function as props to EditUser component
  />
  <Route path="/login" element={<Login />} />
</Routes>

Is féidir fearais a ghlacadh agus a úsáid taobh istigh de chomhpháirt fheidhmiúil cosúil le hargóintí gnáthfheidhme. Is toisc go gcuirtear “ainm” ar aghaidh mar thaca don chomhpháirt Baile, gur féidir linn é a sholáthar sa chomhpháirt chéanna. Sa sampla seo a leanas, táimid ag glacadh leis an prop a rith ag baint úsáide as an chomhréir scriosta chun an t-ainm airí a bhaint as an réad props.

Ag glacadh le frapaí

./src/pages/Home.jsx

... ...
export default function Home({name}) { //Destructuring the name property from the props object, another approach would be: Home(props.name)
 console.log("Rendering: Home");
 return (
   <div className="flex flex-col bg-white m-auto p-auto">
     <h1 className="flex py-5 lg:px-20 md:px-10 mx-5 font-bold text-2xl text-gray-800">
       Welcome {name}
     </h1>
... ...

Leid Pro

Oscail consól an bhrabhsálaí, agus tabhair faoi deara an chaoi a bhfuil na comhpháirteanna go léir a úsáideann an prop “ainm” á rindreáil arís nuair a athraíonn an stát. Nuair a bheidh athróg stáit á ionramháil, stórálfaidh React an chéad stát eile, déanfaidh sé do chomhpháirt arís leis na luachanna nua, agus nuashonróidh sé an Chomhéadain.

useState drawbacks

Props-Druileáil

Téarma é druileáil fearas chun tagairt a dhéanamh d’ordlathas na gcomhpháirteanna ina bhfuil gá le frapaí áirithe arna soláthar ag máthair-chomhpháirt ó thacar comhpháirteanna, réiteach coiteann a úsáideann forbróir gan taithí de ghnáth ná na frapaí seo a chur ar aghaidh tríd an slabhra iomlán comhpháirteanna, is í an cheist atá leis seo. Is é an cur chuige atá ann ná go spreagfaidh athrú ar aon cheann de na frapaí seo slabhra iomlán na gcomhpháirteanna a ath-rindreáil, ag moilliú go héifeachtach an t-iarratas iomlán mar thoradh ar na rindreáil neamhriachtanach seo, na comhpháirteanna i lár an slabhra nach bhfuil gá leis na fearais sin. gníomhú mar mheán chun frapaí a aistriú.

Sampla:

• Sainmhíníodh athróg stáit sa phríomh-chomhpháirt App ag baint úsáide as an hook useState().

• Cuireadh prop ainm ar aghaidh chuig an gcomhpháirt Navbar

• Glacadh leis an prop céanna i Navbar agus cuireadh ar aghaidh mar prop arís eile go dtí an chomhpháirt UserDropdown

• Is é UserDropdown an eilimint leanbh deiridh a ghlacann leis an prop.

./src/App.jsx

... ...
function App() {
 const [name, setName] = useState(test);
 console.log("Rendering: App");

 return (
   <BrowserRouter>
     <div className="h-screen">
       <Navbar name={name} />

       <main className="px-4">
... ...

./src/components/Navbar.jsx

import React from "react";
import Logo from "../assets/cla.svg";
import { BiSearchAlt } from "react-icons/bi";
import { Link } from "react-router-dom";
import UserDropdown from "./UserDropdown";

export default function Navbar({ name }) {
  console.log("Rendering: Navbar");

  return (
    <>
      <div className="navbar bg-base-100 drop-shadow-sm">
        <div className="flex-1">
          <Link
            to="/"
            className="btn btn-ghost normal-case text-md md:text-xl px-2 gap-1"
          >
            <img src={Logo} className="h-6" alt="" />
            Resources
          </Link>
        </div>

        <UserDropdown name={name} />
      </div>
    </>
  );
}

Samhlaigh cé chomh deacair is atá sé aip React a chothabháil le sraitheanna éagsúla de chomhpháirteanna go léir ag dul thar agus ag rindreáil an staid chéanna.

Castacht atá ag Fás agus Cáilíocht an Chóid

Agus úsáidState agus frapaí á n-úsáid mar an t-aon mhodh bainistíochta stáit in fheidhmchlár imoibrithe, féadann an bunchód cód fás go tapa i gcastacht, caithfidh sé na mílte nó na céadta athróg stáit a bhainistiú, ar féidir iad a dhúbailt ar a chéile, scaipthe thar chomhaid éagsúla agus is féidir le comhpháirteanna a bheith scanrúil, beidh gá le breithniú cúramach a dhéanamh ar spleáchais idir comhpháirteanna chun aon athróg a d'fhéadfadh a bheith ann i bhfeidhmchlár atá mall cheana féin a athrú má dhéantar aon athrú ar athróg stáit.

An Dara Cur Chuige: API Comhthéacs

Is é atá san API Comhthéacs ná iarracht React na míbhuntáistí a bhaineann le fearais agus úsáidState amháin a réiteach do bhainistíocht stáit, go háirithe, tagann an API comhthéacs mar fhreagra ar an gceist a luadh cheana maidir leis an ngá atá le fearais a chur ar aghaidh síos an crann comhpháirteanna iomlán. Trí úsáid a bhaint as comhthéacs, is féidir leat stát a shainiú le haghaidh sonraí a mheasann tú a bheith domhanda agus rochtain a fháil ar a staid ó aon phointe sa chrann comhpháirte: ní mó druileáil prop.

Tá sé tábhachtach a chur in iúl gur ceapadh an comhthéacs API ar dtús chun an cheist maidir le comhroinnt sonraí domhanda, sonraí mar théamaí UI, faisnéis fíordheimhnithe arb é ár gcás úsáide, teangacha agus a leithéid) a réiteach, do chineálacha eile sonraí nach mór a roinnt. i measc níos mó ná comhpháirt amháin ach nach gá go bhfuil sé domhanda don fheidhmchlár ar fad, b’fhéidir nach é comhthéacs an rogha is fearr, ag brath ar an gcás úsáide, b’fhéidir go bhféachfá ar theicnící eile ar nós component composition atá lasmuigh de scóip an ailt seo.

Ag Athrú go Comhthéacs

Comhthéacs an Údair a chruthú

tá createContext simplí, cruthaíonn sé athróg comhthéacs nua, tógann sé i bparaiméadar roghnach amháin: luach réamhshocraithe na hathróige comhthéacs.

Feicfimid é seo i ngníomh, cruthaigh ar dtús fillteán nua “comhthéacsanna” agus comhad nua taobh istigh de “Auth.jsx”. Chun comhthéacs nua a chruthú, ní mór dúinn an fheidhm createContext() a agairt, an luach a tugadh ar ais a shannadh d'athróg nua Údar a easpórtálfar an chéad uair eile:

./src/contexts/Auth.jsx

import { createContext } from "react";

export const Auth = createContext();

Cuir Comhthéacs an Údair ar fáil

Anois caithfimid an athróg comhthéacs "Údar" a chruthaigh muid roimhe seo a nochtadh, chun é seo a bhaint amach úsáidimid an soláthraí comhthéacs, is comhpháirt é an soláthraí comhthéacs a bhfuil "luach" aige, is féidir linn an prop seo a úsáid chun luach a roinnt - ainm – trasna an chrainn chomhpháirte, trí chrann na gcomhpháirteanna a fhilleadh leis an gcomhpháirt soláthraí, déanaimid an luach sin a rochtain ó áit ar bith taobh istigh den chrann comhpháirte, gan gá an fearas sin a thabhairt do gach leanbh ina aonar.

Inár sampla fíordheimhnithe, ní mór dúinn athróg chun an réad úsáideora a shealbhú, agus socraitheoir de chineál éigin chun an athróg stáit sin a ionramháil, is cás úsáide foirfe é seo le haghaidh useState. Agus Comhthéacs á úsáid agat, ní mór duit a chinntiú go bhfuil tú ag sainiú na sonraí is mian leat a sholáthar, agus ag cur na sonraí sin - úsáideoir inár sampla - chuig an gcrann comhpháirte go léir atá neadaithe laistigh, mar sin sainmhínigh úsáideoir athróg stáit nua taobh istigh den chomhpháirt soláthraí agus ar deireadh tugaimid an t-úsáideoir agus an t-Úsáideoir socraithe laistigh d'eagar mar an luach a nochtfaidh an soláthraí don chrann comhpháirte:

./src/contexts/Auth.jsx

import { createContext, useState } from "react";

export const Auth = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  return <Auth.Provider value={[user, setUser]}>{children}</Auth.Provider>;
};

Rud eile is féidir linn a dhéanamh ná ár n-athróg stáit “ainm” a bhogadh ó phríomh-chomhpháirt na haipe go comhthéacs an Údair agus é a nochtadh do chomhpháirteanna neadaithe:

import { createContext, useState } from "react";

export const Auth = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [name, setName] = useState("CLA");
  return <Auth.Provider value={[name, setName]}>{children}</Auth.Provider>;
};

Anois níl fágtha ach ár n-aip a neadú isteach sa chomhpháirt AuthProvider céanna a d’onnmhairigh muid.

./src/main.jsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthProvider } from "./contexts/Auth";

import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <AuthProvider>
    <App />
  </AuthProvider>
);

Toisc go bhfuilimid ag rindreáil prop na bpáistí taobh istigh de Auth.Provider, tá na heilimintí go léir atá neadaithe taobh istigh den chomhpháirt AuthProvider anois in ann an prop luacha a thugamar chuig Auth.Provider a ithe. Seans go bhfuil mearbhall ort, ach nuair a dhéanann tú triail air, déan iarracht staid dhomhanda - Comhthéacs - a sholáthar agus a ithe. Tar éis an tsaoil, níor bhain sé ciall dom ach tar éis triail a bhaint as an Comhthéacs API.

Comhthéacs an Údair á ídiú

Is é an chéim dheireanach simplí, bainimid úsáid as an hook comhthéacs "useContext" chun rochtain a fháil ar an luach a sholáthraíonn an soláthraí comhthéacs "Auth", arb é ár gcás an t-eagar ina bhfuil úsáideoir agus setUser, sa chód seo a leanas, táimid in ann bain úsáid as useContext chun comhthéacs an Údar a ithe sa Bharra Nascleanúna. Níl sé seo indéanta ach toisc go bhfuil Navbar neadaithe taobh istigh den chomhpháirt App, agus ós rud é go bhfuil AuthProvider fillte thart ar chomhpháirt na hAipe, is féidir an prop luacha a chaitheamh ag baint úsáide as an hook useContext amháin. Uirlis uamhnach eile a sholáthraíonn React as an mbosca chun aon sonraí is féidir a rochtain go domhanda a bhainistiú agus a ionramhálann aon chomhpháirt tomhaltóra freisin.

./src/components/Navbar.jsx

export default function Navbar() {
 const [name, setName] = useContext(Auth);
 console.log(name)

 return (...)};

Tabhair faoi deara nach bhfuilimid ag glacadh le haon fhearais a thuilleadh sa chomhpháirt fheidhmiúil Navbar(). Táimid ag baint úsáide as useContext(Auth) chun comhthéacs an Údar a ithe ina ionad sin, agus an t-ainm agus an t-ainm socraithe á shaothrú againn. Ciallaíonn sé seo freisin nach gá dúinn an prop a chur ar aghaidh chuig Navbar a thuilleadh:

./src/App.jsx

// ... //
return (
   <BrowserRouter>
     <div className="h-screen">
       <Navbar/> // no need to pass prop anymore
// ... //

Comhthéacs an Údair á nuashonrú

Is féidir linn an fheidhm setName a sholáthraítear a úsáid freisin chun an athróg stáit “ainm” a ionramháil:

./src/pages/EditUser.jsx

export default function EditUser() { // no need to accept props anymore
 const [name, setName] = useContext(Auth); // grabbing the name and setName variables from Auth context
 console.log("Rendering: EditUser");

Hook useReducer() á thabhairt isteach

Sa sampla roimhe seo d'úsáideamar an API comhthéacs chun ár staid a bhainistiú agus a roinnt síos an crann comhpháirte, b'fhéidir gur thug tú faoi deara go bhfuil muid fós ag baint úsáide as useState mar bhunús ár loighic, agus tá sé seo ceart go leor den chuid is mó toisc go bhfuil ár staid fós ina réad simplí ag an bpointe seo ach dá mbeimid chun cumais ár sreabhadh fíordheimhnithe a leathnú is cinnte go gcaithfimid níos mó ná ríomhphost an úsáideora atá logáilte isteach faoi láthair a stóráil, agus seo an áit a dtéimid ar ais chuig na teorainneacha a ndeachaigh muid isteach roimhe seo maidir le an úsáid a bhaint as useState le staid chasta, go fortunately, réitíonn React an tsaincheist seo trí rogha eile a sholáthar seachas úsáidState chun staid chasta a bhainistiú: cuir isteach useReducer.

Is féidir smaoineamh ar useReducer mar leagan ginearálaithe de useState, glacann sé dhá pharaiméadar: feidhm laghdaitheora agus staid tosaigh.

Ní dhéanfaidh aon ní suimiúil a thabhairt faoi deara don stát tosaigh, tarlaíonn an draíocht taobh istigh den fheidhm laghdaitheora: seiceálann sé an cineál gníomhaíochta a tharla, agus ag brath ar an ngníomh sin, cinnfidh an laghdaitheoir cad iad na nuashonruithe atá le cur i bhfeidhm ar an stát agus cuirfidh sé a luach nua ar ais. .

Ag féachaint isteach sa chód thíos, tá dhá chineál gníomhartha féideartha ag an bhfeidhm laghdaitheora:

• "LOGIN": agus sa chás sin tabharfar an staid úsáideora cothrom le dáta leis na dintiúir úsáideora nua a chuirtear ar fáil laistigh den phálasta gníomhaíochta.

• "LOGOUT": sa chás sin bainfear staid an úsáideora den stóras áitiúil agus cuirfear ar ais go neamhní é.

Tá sé tábhachtach a thabhairt faoi deara go bhfuil réimse cineáil san réad gnímh a shocraíonn cén loighic a chuirfear i bhfeidhm agus réimse pálasta roghnach chun sonraí a sholáthar atá riachtanach chun an loighic sin a chur i bhfeidhm.

Ar deireadh, filleann an hook useReducer an staid reatha agus feidhm seolta a úsáidimid chun gníomh a chur ar aghaidh chuig an laghdaitheoir.

Don chuid eile den loighic, tá sé comhionann leis an sampla roimhe seo:

./src/contexts/Auth.jsx

import { createContext, useEffect, useReducer, useState } from "react";

export const Auth = createContext();
import { createContext, useReducer } from "react";

export const Auth = createContext();
const reducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      return { user: action.payload };

    case "LOGOUT":
      localStorage.removeItem("user");
      return { user: null };

    default:
      break;
  }
};

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    user: null,
  });

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

Gníomhartha seolta seachas feidhm socraitheoir setState a úsáid - m.sh. setName -

Mar a luaigh muid díreach, úsáidimid an fheidhm seolta chun gníomh a chur ar aghaidh chuig an laghdaitheoir, sa chód seo a leanas, cuirimid tús le gníomh LOGÁIL agus cuirimid an ríomhphost úsáideora ar fáil mar phálasta, anois tabharfar an stát úsáideora cothrom le dáta agus cuirfear tús leis an athrú seo. atrindreáil na gcomhpháirteanna go léir atá suibscríofa don stát úsáideora. Tá sé tábhachtach a chur in iúl nach spreagfar ath- rindreáil ach amháin má tharlaíonn athrú iarbhír ar an stát, gan aon rindreáil má fhilleann an laghdaitheoir an stát céanna roimhe seo.

export default function Login() {
 const { dispatch } = useContext(Auth);


 const handleLogin = async (e) => {
   // Updating the global Auth context
   dispatch({ type: "LOGIN", payload: {email: email.current.value} });
 };

 return (...)};

Logáil Isteach Úsáideora

Leid Pro

Tabhair faoi deara conas a stóráiltear an réad úsáideora a fhaighimid tar éis logáil isteach rathúil sa Stóráil áitiúil anois.

Hook saincheaptha le haghaidh Logáil Isteach

Anois go bhfuil greim maith againn ar useReducer, is féidir linn ár loighic logála isteach agus logála amach a chuimsiú a thuilleadh ina gcrúcaí saincheaptha féin, trí ghlao amháin chuig an hook Logála isteach, is féidir linn glao API a láimhseáil chuig an mbealach logáil isteach, faigh an t-úsáideoir nua ar ais. dintiúir agus stóráil sa stóras áitiúil iad, seol glao LOGIN chun staid an úsáideora a nuashonrú, agus tú ag déileáil le láimhseáil earráidí:

./src/dubháin/useLogin.jsx

import { useContext, useState } from "react";
import { Auth } from "../contexts/Auth";

export const useLogin = () => {
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const { dispatch } = useContext(Auth);

  const login = async (email, password) => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch("/api/users/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });

      const json = await response.json();

      if (json.name === "Error") {
        setError(json.message);
        setIsLoading(false);
      }

      if (!response.ok) {
        setIsLoading(false);
        setError(json);
      }

      if (response.ok) {
        // Save the user and token in the localstorage
        localStorage.setItem("user", JSON.stringify(json));

        // Updating the global Auth context
        dispatch({ type: "LOGIN", payload: json });

        setIsLoading(false);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return { error, isLoading, login };
};

Nóta: le haghaidh úsáideoirí React níos forbartha i measc na léitheoirí, b'fhéidir go bhfuil tú ag smaoineamh cén fáth nár úsáideamar an ghné tosaigh leisciúil de useReducer chun dintiúir an úsáideora a fháil, glacann useReducer le tríú paraiméadar roghnach ar a dtugtar feidhm init, úsáidtear an fheidhm seo ar eagla na heagla ní mór dúinn roinnt loighic a chur i bhfeidhm sular féidir linn luach tosaigh an stáit a fháil, is é an chúis nár roghnaigh muid é seo ná ábhar simplí maidir le hábhair imní a scaradh, tá an cód ar an mbealach seo níos simplí a thuiscint agus mar thoradh air sin níos simplí a choimeád ar bun. .

Leathanach Logáil Isteach

Seo an chuma atá ar an gcuid is airde dár leathanach Logáil Isteach tar éis an hook useLogin() a úsáid chun an fheidhm logáil isteach a bhaint as, agus an fheidhm logála isteach a agairt le dintiúir a chuir úsáideoir isteach:

// ... ... //
export default function Login() {
 const { login, isLoading, error } = useLogin();
 console.log("Rendering: Login");
 const email = createRef(null);
 const password = createRef(null);

 const handleLogin = async (e) => {
   await login(email.current.value, password.current.value);
 };
 return (...)
// ... ... //

Táimid ag díchumasú na feidhme Cuir isteach freisin nuair a chuireann an t-úsáideoir an fhoirm isteach:

<button
  onClick={handleLogin}
  disabled={isLoading}
  className="btn btn-square w-full bg-gray-100 text-gray-600 hover:bg-gray-300 border-none"
>
  {isLoading && "A moment please!"}
  {!isLoading && "Login"}
</button>

Agus aon earráidí fíordheimhnithe a fhaighimid ónár n-innill á ndéanamh:

{
  error && <span className="text-red-500 p-2">{error.message}</span>;
}

Staid an úsáideora a chothabháil

B'fhéidir go bhfuil tú ag smaoineamh cén fáth go gcaithfimid an réad úsáideora a stóráil sa Stóráil áitiúil, go simplí, ba mhaith linn an t-úsáideoir a choinneáil sínithe isteach chomh fada agus nach bhfuil an comhartha imithe in éag. Is bealach iontach é úsáid localStorage chun píosaí JSON a stóráil, díreach mar atá inár sampla. Tabhair faoi deara conas a scriosfar an stát má athnuachann tú an leathanach tar éis logáil isteach. Is féidir é seo a réiteach go héasca trí úsáid a bhaint as duán useEffect chun a sheiceáil an bhfuil réad úsáideora stóráilte againn i localStorage, má tá ceann ann, logálaimid an t-úsáideoir go huathoibríoch:

// ... ... //
export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    user: null,
  });

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("user"));

    if (user) {
      return dispatch({ type: "LOGIN", payload: user });
    }
  }, []);

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

Crúcaí saincheaptha le haghaidh Logáil Amach

Baineann an rud céanna leis an hook Logout, anseo táimid ag seoladh gníomh LOGOUT chun na dintiúir úsáideora reatha a bhaint as an stát agus as an stór áitiúil araon:

./src/dubháin/useLogout.jsx

import { useContext } from "react";
import { Auth } from "../contexts/Auth";

export const useLogout = () => {
  const { dispatch } = useContext(Auth);

  const logout = () => {
    // delete user from the localstorage
    localStorage.removeItem("user");
    // Wipe out the Auth context (user:null) / dipatch 'LOGOUT'
    dispatch({ type: "LOGOUT" });
  };

  return { logout };
};

Logáil Amach Úsáideora

Chun úsáideoir a logáil amach, cuirimis imeacht cliceáil leis an gcnaipe Logáil Amach a fhaightear in UserDropdown.jsx, agus láimhseálfaimid é dá réir:

./src/components/UserDropdown.jsx

// Extracting the logout function from useLogout() and handling the click event listener //
export default function UserDropdown() {
 const { user } = useContext(Auth);
 const { logout } = useLogout();
 console.log("Rendering: UserDropdown");

 const handleLogout = () => {
   logout();
 };
// ... ... //

// Adding a click event listener to logout button //
<li>
   <button onClick={handleLogout}>Logout</button>
</li>
// ... ... //

Bealaí Frithghníomhaithe a Chosaint

Is í an chéim dheireanach maidir lenár n-iarratas a chur i bhfeidhm ná an stát úsáideora domhanda a ghiaráil chun nascleanúint úsáideora a rialú, meabhrúchán tapa faoin iompraíocht ba cheart dúinn a bhaint amach: ar dtús cuirtear fáilte roimh an úsáideoir ón leathanach logála isteach, ón bpointe sin is féidir leis an úsáideoir rochtain a fháil ar an leathanach baile amháin tar éis logáil isteach rathúil, mar an gcéanna déanfar an t-úsáideoir a atreorú chuig an leathanach logála isteach tar éis logáil amach.

Bainimid é seo amach le cabhair ón leabharlann react-ródaire-dom trí 2 bhealach a shainmhíniú: "/" agus "/login", déanaimid rialú ar an gcomhpháirt atá le tabhairt ag gach bealach ag baint úsáide as an stát údaraithe domhanda, is ionann measúnú údaraithe go null d’úsáideoir neamhdheimhnithe agus vice-versa:

./src/App.jsx

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Login from "./pages/Login";
import { useContext } from "react";
import { Auth } from "./contexts/Auth";

function App() {
  const { user } = useContext(Auth);
  return (
    <BrowserRouter>
      <div className="h-screen">
        <Navbar />
        <main className="px-4">
          <Routes>
            <Route
              path="/"
              element={user ? <Home /> : <Navigate to="/login" />}
            />
            <Route
              path="/login"
              element={!user ? <Login /> : <Navigate to="/" />}
            />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;

Léaráid Achoimre

Timfhilleadh suas

San Airteagal seo rinneamar iarracht dul i ngleic leis an gcás úsáide simplí ach an-choitianta maidir le bainistíocht stáit a chur i bhfeidhm le haghaidh sreabhadh oibre fíordheimhnithe, ag dul trí na cineálacha cur chuige éagsúla, an réasúnaíocht taobh thiar de gach ceann acu agus a gcuid malairtí. Tá bainistíocht stáit i gcreatanna taobh cliant agus in React go háirithe ar cheann de na hábhair is mó a labhraítear faoi sa phobal tosaigh, go simplí toisc go bhféadfadh sé feidhmíocht agus inscálaitheacht d’iarratais a dhéanamh nó a bhriseadh. Tá an méid ollmhór de na teicníochtaí, patrúin, leabharlanna agus uirlisí éagsúla a dhéanann iarracht an tsaincheist seo de bhainistíocht stáit a réiteach thar a bheith mór, ba é an sprioc a bhí againn ná tuiscint mhaith a thabhairt duit ar na cleachtais ionas gur féidir leat é a chur i bhfeidhm i d'iarratas féin, le haghaidh níos airde. teicnící agus patrúin bainistíochta stáit i bhfeidhmchláir níos casta, féach ar ár n-alt seo chugainn áit a bhfuil muid ag dul isteach redux do bhainistíocht stáit inscálaithe in React.

Ag teacht go luath

ContextAPI vs Redux Toolkit

Bhí blianta fada glactha ag Redux sa phobal roimh fhoireann uirlisí Redux, i ndáiríre, tugadh isteach RTK mar theimpléad tosaithe chun bainistíocht stáit redux a bootstrap in iarratais nua (b é an t-ainm tosaigh “redux-starter-kit” an t-ainm tosaigh i mí Dheireadh Fómhair 2019), cé go raibh Sa lá atá inniu ann, tá comhdhearcadh ginearálta ann idir lucht cothabhála Redux agus an pobal gurb é foireann uirlisí Redux an bealach bailí le bheith ag obair le redux.Tógann RTX go leor de loighic Redux a fhágann go bhfuil sé níos éasca le húsáid, le i bhfad níos lú briathra, agus spreagann sé forbróirí chun lean na cleachtais is fearr, is é príomhdhifríocht amháin idir an dá cheann ná gur tógadh Redux le bheith gan tuairim, ag soláthar API íosta agus ag súil go ndéanfadh forbróirí an chuid is mó den ardú trom trína leabharlanna féin a scríobh le haghaidh tascanna coitianta agus déileáil le struchtúr cód, mar thoradh air seo bhí am forbartha mall agus cód messy, cuireadh foireann uirlisí Redux leis mar shraith bhreise astarraingthe a chuir cosc ​​ar fhorbróirí titim isteach ina ngaistí coitianta, féach ar an gcáipéisíocht oifigiúil le haghaidh tuilleadh léargais agus an réasúnaíocht óna lucht cothabhála anseo.