نوشته های Vida Hedayati

useReducer Hook

Vida Hedayati — Mon, 31 Jan 2022 11:40:42 +0330

کار با useReducer Hookدوباره سلام این بار هم اومدم با یه هوک خیلی جذاب ریکتما برای مدیریت کردن state های برناممون چند تا راه داریم که یکیش استفاده از هوک خود ریکته : useReducerخب ابتدا از ریکت ایمپورت میکنیم:import { useReducer} from 'react';خب حالا میریم کامپوننتمون رو اماده کنیم برای استفادهقدم دوم از useReducer مقادیری که باید استفاده کنیم را distruct میکنیم شبیه useStateconst init=[{}]; const [state, dispatch] = useReducer(reduce, init);یه مقدار inialState هم میذاریم.اینجا reduce چیست؟یه تابع که میتونیم استیت ها رو هر تغییری که میخواهیم روشون پیاده سازی کنیم const getState = (data) => { dispatch({ type: "ADD",payload:data}); };در اینجا ما dispatch مون رو با اکشن دلخواه صدا میزنیم و payload مون پر میشه از دیتیایی که بهش میدیمو در نهایت تابعی که به useReducer دادیم را فراخوانی میکنیم const reduce = (state, action) => { switch (action.type) { case "ADD": return [{action.payload}}; default: return state; } };به همین راحتیاین یه مثال خیلی ساده بود از useReducer امیدوارم براتون مفید واقع باشه هر انتقادی بود لطفا کامنت کنید.

context react

Vida Hedayati — Sat, 06 Nov 2021 15:58:34 +0330

سلام امروز اومدم با یه پست جدیددر این مقاله قصد دارم راجب context react کمی توضیح بدم:)در ریکت معمولا داده ها از طریق props ها از پدر به فرزند ها منقل میشن. اما فرص کنیم کلی دیتا داریم ک اگر بخواهیم از props ها استفاده کنیم کلی دشوار میشه و کد نویسی کثیف از نظر من:)پس اینجا context ها منبعی هستن برای نوشتن state های سراسریکه بالاترین لایه تعریف میشوند و فرزندها به اون state ها دسترسی دارن.خب بریم سراغ context.provider : یک prop به نام value را می‌پذیرد که در واقع مقدار رو میگیره برامون نگه میداره. یعنی برای بروزرسانی داده هامون از این قابلیت استفاده میکنیم. در context.consumer : مقدار داده رو بهمون برمیگردونه ولی امکان بروزرسانی داده یا تغییرآن رو نداریمدر اینجا میخواهم custom theme را با context پیاده سازی کنم:import React, { createContext, useState } from "react" const ThemeColors = { primary: "brown", dark: "#000", light: "#fff", };ابتدا یه ابجکتی از رنگ هایی که قرار است استفاده کنم میسازم.که در اینجا فقط از دو کلید dark و light استفاده کردمدر اینجا context رو میسازم با createContext که مقدار default بهش یه رنگ پیش فرض میدهم و یه تابع برای عوض کردن رنگimport React, { createContext, useState } from "react" const ThemeColors = { primary: "brown", dark: "#000", light: "#fff", }; export const ThemeColorContext = createContext({ color: ThemeColors.dark, changeColor: (color) => {}, });خب بریم سراغ ساخت wrapper مون که توش یه state با مقدار default و یه تابع برای عوض کردن رنگ نوشته شده و سپس تو خروجیمون context که ساخته شده با provider و value که داده شده مینویسم.export function ThemeColorWrapper({ children }) { const [color, setColor] = useState(ThemeColors.dark); function changeColor(color) { setColor(color); } return ( {children} حال ThemeColorWrapper یه لایه کانتکس شده که هرجایی ک بخواهیم استفاده کنیم تو لایه های بالاتر میپیچیمش تا children ها به مقدارا دسترسی داشته باشن.حال هر کامپوننتی که تو Main باشه به context دسترسی دارن.return (

); سپس تو کامپوننت های پایین تر وقتی که قراره استفاده بشه از context به این روش از هوک خود ریکت useContext و ورودی بهش همون context ساخته شده داده میشودimport React,{useContext) from "react" const Dashboard = () => { const dataColor = useContext(ThemeColorContext); } سپس یه دکمه گذاشتم برای تغغیر رنگ که با رویداد کلیک تابع changeColor که در context ساخته شده رو فراخوانی میکند و چیزی که برمیگردونه رو تاثیرش رو همه ی کامپوننت های children میباشد.; خب اینم از آموزش امروز امیدوارم که براتون مفید باشه. اگ چیزی از قلم انداختم خوشحال میشم نظرتون رو تو کامنت برام بنویسید.