نحوه استفاده از context API در React

Context API چیست؟

Context API یک ساختار کامپوننتی است که توسط ری‌اکت به منظور مدیریت state ها برای تمام سطوح برنامه شما ارائه می‌شود.

این همانند redux کار خواهد کرد و به شما کمک می‌کند redux را جایگزین کنید یا از استفاده از کتابخانه‌های شخص ثالث برای برنامه خود جلوگیری کنید.

ما باید عبارت خود را تعریف کنیم و فقط مقادیر را از طریق ارائه دهنده برای برنامه ری‌اکت خود منتقل کنیم.

بیایید ببینیم چگونه می‌توان context را ایجاد کرد و چگونه از آن در برنامه ری‌اکت خود با ایجاد یک برنامه شمارنده ساده استفاده کرد.

شما باید node و npm را نصب کرده باشید. سپس یک پروژه ری‌اکت جدید ایجاد کنید. برای این کار دستور زیر را در ترمینال خود تایپ کنید:

npx create-react-app contex-api

اکنون یک پروژه ری‌اکت خواهید داشت، فقط یک پوشه با نام context در داخل پوشه src/ ایجاد کنید و یک فایل index.js در آن بسازید. این فایل context برای برنامه شمارنده ما خواهد بود.

ما با استفاده از متد ()createContext در ری‌اکت context جدیدی ایجاد خواهیم کرد. کد زیر را در فایل src/text/index.js خود کپی کنید.

import React from “react”
export default React.createContext({
title: “Welcome to counter App!”,
counter: 0
});

در context دو مقدار تعریف کرده‌ایم که یکی عنوان است و دیگری شمارنده برای مدیریت شمارش رکورد. اکنون خواهیم دید که چگونه از این مقادیر در داخل برنامه‌های خود استفاده کنیم.

فقط محتوای فایل App.js را با کد زیر جایگزین کنید.

import React from ‘react’;
import Context from “./context”
class App extends React.Component {
render(){
return (
<React.Fragment>
<Context.Consumer>
{context => (
<div style={{ display: ‘flex’, justifyContent: ‘center’, flexDirection: ‘column’, alignItems: ‘center’}}>
<h1>{context.title}</h1>
<div style={{ display: ‘flex’, flexDirection: ‘row’, justifyContent: ‘space-around’}}>
<button>Increment</button>
<p>Conter:- {context.counter}</p>
<button>Decrement</button>
</div>
</div>
)}
</Context.Consumer>
</React.Fragment>
);
}
}
export default App;

در فایل App.js، ما همان context را که قبلا ایجاد کرده بودیم، وارد کرده‌ایم و از مقادیر موجود در آن محتوا با استفاده از متد Consumer از کلاس React استفاده می‌کنیم. این یکی از راه‌های دستیابی به مقادیری است که در context وجود دارد.

اکنون برنامه را اجرا کنید. ترمینال خود را باز کرده و به پوشه مربوطه بروید و خط زیر را در ترمینال خود تایپ کنید:

npm start

به http://localhost:3000 مراجعه کنید و خروجی زیر را مشاهده خواهید کرد.

ما با استفاده از متد Consumer به API context خود در متد render دسترسی پیدا کرده‌ایم. در حال حاضر دکمه‌های افزایش و کاهش ما کار نمی‌کنند. بگذارید کدی بنویسیم تا آن‌ها داینامیک شوند.

برای این کار از دو تابع increment() و decrement() استفاده می‌کنیم. تابع increment() را برای افزایش شمارنده با گام یک و تابع decrement() را برای کاهش شمارنده می‌نویسیم.

قبل از متد render، کد زیر را در فایل App.js خود اضافه کنید.

state = {
counter: 0
}
increment = () => {
this.setState({
counter: this.state.counter + 1
});
}
decrement = () => {
this.setState({
counter: this.state.counter — 1
});
}

بنابراین توابع خود را آماده کرده‌ایم اما اگر به http://localhost:3000 مراجعه کرده باشید، می‌بینید که دکمه‌های ما هنوز کار نمی‌کنند.

زیرا در پیشخوان خود مقداری را نشان می‌دهیم که API context است و هنوز مقادیر را به روز نکرده‌ایم. بیایید ببینیم که چگونه مقادیر جدید را به context بدهیم. برای انجام این کار، تغییراتی می‌دهیم و کامپوننت‌های جداگانه‌ای برای عنوان و شمارنده ایجاد خواهیم کرد. کامپوننت title عنوان برنامه و کامپوننت counter شمارنده به روز شده را نمایش می‌دهد.

سپس یک کامپوننت پوشه جدید در مسیر /src ایجاد می‌کنیم و دو فایل در آن قرار می‌دهیم که به ترتیب نام آن‌ها را CounterTitle.js و Counter.js می‌گذاریم. بنابراین بیایید ببینیم چگونه مقادیر context را به روز کنیم.

اکنون فایل App.js را با کد زیر جایگزین خواهیم کرد.

import React from ‘react’;
import Context from “./context”
import Counter from “./component/Counter”
import CounterTitle from “./component/CounterTitle”
class App extends React.Component {
state = {
counter: 0
}
increment = () => {
this.setState({
counter: this.state.counter + 1
});
}
decrement = () => {
this.setState({
counter: this.state.counter — 1
});
}
render(){
return (
<React.Fragment>
<Context.Provider value={{ counter: this.state.counter }}>
<div style={{ display: ‘flex’, justifyContent: ‘center’, flexDirection: ‘column’, alignItems: ‘center’}}>
<CounterTitle />
<div style={{ display: ‘flex’, flexDirection: ‘row’, justifyContent: ‘space-around’}}>
<button onClick={this.increment}>Increment</button>
<Counter />
<button onClick={this.decrement}>Decrement</button>
</div>
</div>
)}
</Context.Provider>
</React.Fragment>
);
}
}
export default App;

در کد بالا، از تابع Provider به جای Consumer استفاده کرده‌ایم. اگر بخواهید از context به مقادیر دسترسی پیدا کنید، تابع Consumer استفاده می‌شود و از تابع Provider برای به روزرسانی یا تغییر مقادیر که برای همه اجزای برنامه در دسترس خواهد بود، استفاده می‌شود.

همچنین کامپوننت‌های Counter و CounterTitle را در App.j وارد کرده‌ایم. حال اجازه دهید کدهای زیر را به ترتیب به CounterTitle.js و Counter.js اضافه کنیم.

اگر به هر دو فایل نگاه کنید، خواهید دید که ما از کامپوننت‌های فانکشنال (تابعی) استفاده کرده‌ایم و از هیچ تابع consumer استفاده نکردیم. اگر از کامپوننت تابعی بهره بگیریم و مجبور به گرفتن مقدار API شویم، از hook ()useContext در ری‌اکت استفاده می‌کنیم. همچنین قادر به استفاده از API context در کلاس و کامپوننت‌های تابعی هر دو هستیم. حالا برنامه را دوباره اجرا کنید و خواهید دید که به خوبی کار می‌کند.

در این مقاله آموزشی یاد گرفتید که چگونه از API context در کلاس و کامپوننت‌های فانکشنال استفاده کنید.

اگر کد کامل برنامه فوق را می‌خواهید، آن را از این لینک دریافت کنید.

در صورت داشتن هرگونه نظر یا سوالی، آن را در بخش زیر با ما در میان بگذارید.

منبع