نوشته های عباس باقری

استفاده از کتابخانه jdf در لاراول

عباس باقری — Fri, 17 Nov 2023 10:03:57 +0330

کتابخانه jdf برای استفاده از تقویم شمسی در php بکار می رود.برای استفاده از کتابخانه jdf در لاراول دستور زیر را در ترمینال وارد کنید:composer require abasb75/jdfبرای استفاده از توابع این کتابخانه میتوانید از الگوی زیر استفاده کنید:use Abasb75\Jdf\JDF; public function myController(){ ... $shamsi = JDF::gregorian_to_jalali(2012,12,12); ... }

نصب نسخه خاص php روی اوبونتو

عباس باقری — Fri, 02 Jun 2023 15:33:54 +0330

به طور پیشفرض apt install php نسخه‌ای از php را برای ما نصب میکند که ممکن است با نیاز نرم افزار ما متناسب نباشد، یا نیاز به داشتن چند نسخه php داریم.دستور زیر را در ترمینال وارد میکنیم :sudo apt show phpاین دستور نسخه پیشفرض php که ربپازیتوری برای شما نصب میکند را نمایش میدهد، خروجی این دستور به صورت زیر است :خب با دستور apt install php برای ما نسخه 8.1 نصب میشود. ولی اگر به نسخه‌ی دیگری مانند 7.4 نیاز داشتیم باید چه کنیم؟ابتدا باید ondrej/php ppa را روی سیستم ابونتور نصب کنیم :sudo apt install software-properties-common sudo add-apt-repository ppa:ondrej/phpریپازیتورهای ابونتو را آپدیت میکنیم :sudo apt updateاکنون نسخه‌ای که نیاز داریم نصب میکنیم. توجه کنید میتوانیم چند نسخه مختلف را نصب کنیم :sudo apt install php5.6 sudo apt install php7.0 sudo apt install php7.1 sudo apt install php7.2 sudo apt install php7.3 sudo apt install php7.4 sudo apt install php8.0 sudo apt install php8.1 sudo apt install php8.2برای nginx :sudo apt install php5.6-fpm sudo apt install php7.0-fpm sudo apt install php7.1-fpm sudo apt install php7.2-fpm sudo apt install php7.3-fpm sudo apt install php7.4-fpm sudo apt install php8.0-fpm sudo apt install php8.1-fpm sudo apt install php8.2-fpmنصب ماژولهای phpدر صورتی که نیاز به نصب ماژولهای php8.2 (یا هر نسخه دیگری داشتید) فقط کافیست دستور زیر را در ترمینال وارد کنید سپس دکمه tab را فشار دهید:sudo apt isntall php8.2لیست ماژولهایی که میتوانید نصب کنید برای شما نمایش میدهد :دقت کنید بجای دکمه enter دکمه ماژول را وارد کنیدبرای نصب یک ریپازیتوری مانند php8.2-zip کافیست دستورsudo apt install php8.2-zipرا وارد کنید.نسخه پیشفرض phpما می‌توانیم چند نسخه php را نصب کنیم. اما برای اینکه یک نسخه را پیشفرض سیستم عامل در نظر بگیریم کافیست دستور زیر را وارد کنیم :sudo update-alternatives --set php /usr/bin/php8.2بجای 8.2 نسخه مورد نظر خود را قرار می‌دهیم.استفاده برای آپاچیبرای فعال کردن نسخه خاص برای آپاچی ابتدا نسخه ای که آپاچی در حال حاضر از آن استفاده میکند را غیرفعال میکنمsudo a2dismod php8.1سپس نسخه مورد نظر خود را برای آپاچی فعال میکنیم :sudo a2enmod php8.2

چگونه در nextjs از پایگاه داده mysql استفاده کنیم؟

عباس باقری — Sun, 21 May 2023 09:27:02 +0330

در این پست نحوه اتصال nextjs به دیتابیس mysql را بررسی میکنیم.برای اتصال به دیتابیس نیازی به دیگر فریمورکها یا زبانهای برنامه‌نویسی سمت سرور مانند nodejs و php نیست.ایجاد سرور mysqlابتدا یک سرور mysql راه‌اندازی و دیتابیس خود را به آن اضافه میکنیم: در این مثال من از نرم‌افزار xampp استفاده کردم. دیتابیس mysql را میتوان به روشهای دیگری مانند نصب مستقیم یا استفاده از داکر هم راه‌اندازی کرد.نصب کتابخانه serverless-mysqlبرای شروع استفاده از mysql در nextjs ابتدا باید کتابخانه‌ای مانند serverless-mysql را نصب کنیم :npm install serverless-mysqlمعرفی کانفیگ mysqlفایل db.js را به سورس پروژه nextjs خود اضافه می‌کنیم:import mysql from 'serverless-mysql'; const db = mysql({ config: { host: 'localhost', port: '3306', database: 'jabira', user: 'root', password: '', } }); export default async function excuteQuery({ query, values }) { try { const results = await db.query(query, values); await db.end(); return results; } catch (error) { return { error }; } }تابع executeQuery به ما کمک میکند بتوانیم کوئری های sql مورد نیاز خود را اجرا کنیم.گرفتن دیتا در page.jsاکنون به سراغ فایل page.js خود رفته و از تابع executeQuery برای ارسال درخواست به پایگاه داده استفاده می‌کنیم :import excuteQuery from "@/db" export default async function Home() { const result = await excuteQuery({ query: 'SELECT * FROM `pages`;', values: [], }); return ( ) }

ایجاد پروژه جدید React بدون CRA

عباس باقری — Sat, 25 Mar 2023 09:10:14 +0330

در این پست به چگونگی ساخت پروژه reactjs بدون ابزارهایی مانند "create-react-app" پرداخته می‌شود.ساخت پروژه جدید node js ابتدا یک فولدر با نام دلخواه ایجاد میکنیم، سپس وارد این فولدر می‌شویم و ترمینال را درون این پوشه بازکرده سپس با کمک دستور زیر فایل package.json مربوط به npm را ایجاد می‌کنیم:npm initnpm initنصب typescriptابزار typescript کمک می‌کند در هنگام توسعه به تمییزتر شدن کدها کمک می‌کند:npm i --save-dev typescript @types/node سپس فایل tsconfig.ts را ایجاد می‌کنیم:{ "compilerOptions": { "esModuleInterop": true, "jsx": "react", "module": "esnext", "moduleResolution": "node", "lib": [ "dom", "esnext" ], "strict": true, "sourceMap": true, "target": "esnext", }, "exclude": [ "node_modules" ] }نصب webpackابزار webpack را برای ایجاد build نهایی و یا ایجاد server هنگام توسعه نیاز داریم.npm install --save-dev webpack webpack-cli webpack-dev-server css-loader html-webpack-plugin mini-css-extract-pluginهمچنین :npm install --save-dev ts-loaderاکنون در روت پروژه یک فایل بنام webpack.config.js ایجاد می‌کنیم :const prod = process.env.NODE_ENV === 'production'; const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: prod ? 'production' : 'development', entry: './src/index.tsx', // index.ts/index.js path output: { path: __dirname + '/dist/', //build directory }, module: { rules: [ { test: /\.(ts|tsx)$/, exclude: /node_modules/, resolve: { extensions: ['.ts', '.tsx', '.js', '.json'], }, use: 'ts-loader', }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ] }, devtool: prod ? undefined : 'source-map', plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', //index.html path }), new MiniCssExtractPlugin(), ], };نصب Babelمرورگرها قادر به درک ECMAScript نیستند. این ابزار کدهای ECMAScript را به کدهای جاوااسکریپت قابل درک برای مرورگرها تبدیل می‌کند:npm install --save-dev babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/preset-react @babel/eslint-parser @babel/runtime @babel/cliنصب eslint ابزار eslint در هنگام توسعه به پیدا کردن مشکلات کد به توسعه دهنده کمک می‌کند:npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-jest eslint-config-prettierنصب pathاز این ابزار به جهت کار با مسیرها استفاده می‌کنیم:npm install --save-dev pathنصب react کتابخانه react سرعت توسعه برنامه‌های جاوااسکریپتی را با کمک کدهای از پیش نوشته افزایش می‌دهد:npm install react react-domهمچنین :npm install --save-dev @types/react @types/react-domساخت فایل index.htmlدرون فولدر پروژه یک فولدر بنام public کنار package.json ایجاد می‌کنیم و سپس درون این فولدر فایل index.html را قرار می‌دهیم:دقت شود که ما یک تگ div درون فایل html با شناسه "my-app-root" هم ایجاد کردیم.ساخت فایل index.tsدرون پوشه src فایل index.ts خود را اضافه میکنیم:اجرا در مرورگربرای تست فایل ابتدا سراغ فایل package.json رفته و اسکریپت test و build را به این فایل اضافه می‌کنیم:اسکریپت‌های مربوط به test و start در ویندوز:"start": "webpack serve --port 3000", "build": "set NODE_ENV=production && webpack"درون لینوکس:"start": "webpack serve --port 3000", "build": "NODE_ENV=production webpack"سپس با دستور زیر می‌توان اپ را روی پورت 3000 اجرا کرد:npm startبیلد گرفتن از پروژهبرای گرفتن build کافیست دستور زیر را در ترمینال وارد میکنیم:npm run build

چگونه از redux به همراه 13 nextjs استفاده کنیم

عباس باقری — Fri, 24 Mar 2023 22:37:34 +0330

با تغییراتی که در nextjs نسخه 13 بوجود آمده است، نحوه استفاده از redux هم کمی متفاوت شده است.برای شروع کار ابتدا redux را نصب می‌کنیم: npm install @reduxjs/toolkit react-reduxسپس sliceها و store خود را ایجاد میکنیم. (شروع کار با redux toolkit)فایل store.js :import { configureStore } from "@reduxjs/toolkit" import counter from "./counterSlice" import { createSlice } from "@reduxjs/toolkit" iconst initialState:CounterState = { value:0, } const counterSlice = createSlice({ name: "counter", initialState, reducers:{ increment: (state,action) => { state.value += action.payload }, decrement: (state) => { state.value -= 1 }, } }); export const {increment , decrement} = counterSlice.actions; export default counterSlice.reducer; const store = configureStore({ reducer:{ counter, } }) ; export default store;همان طور که می‌دانید برای استفاده از کتابخانه react-redux باید کامپوننتهای خود را درون کامپوننت Provider قرار دهیم. همچنین همان طور که میدانید در نسخه 13 فریمورک next.js علاوه بر تغییر در ساختار فایل‌ها پوشه app جایگزین پوشه pages شده است. درون نسخه 13 به سراغ فایل app/layout.js می‌رویم :export default function RootLayout({ children }) { return ( {children} ); }دقت کنید به دلیل اینکه layout درون سرور رندر می‌شود، ما نمی‌توانیم مانند کد بالا مستقیما از Provider درون فایل layout.js استفاده کنیم، پس یک کامپوننت سمت کلاینت ایجاد میکنم.فایل ClientProvider را مانند نمونه ایجاد می‌کنیم :"use client" import store from "./store" import {Provider} from "react-redux" export default ClientProvider({children}){ return( {children} }اکنون ClientProvider را درون فایل layout.js را جایگزین Provider می‌کنیم:import ClientProvider from "./ClientProvider" export default function RootLayout({ children }) { return ( {children} ); }اکنون می‌توانیم از redux درون کامپوننتهای سمت client استفاده کنیم.ما نمیتوانیم از هوکهای redux درون کامپوننتهای پردازش شده سرور استفاده کنیم.

دسترسی به کنسول مرورگر کروم موبایل

عباس باقری — Sat, 18 Mar 2023 21:25:12 +0330

تا موقعی که روی دستگاه‌های موبایل اجرا نکردیم همه چی خوب کار می‌کرد. ممکن است گاها صفحات وب در مرورگرهای موبایل و یا برخی دستگاه‌های همراه دچار خطا شوند. اما مشکلی که وجود دارد این است که بطور مستقیم امکان دسترسی به لاگهای کنسول مرورگرهای موبایل وجود ندارد. برای دسترسی به کنسول مطابق دستورالعمل زیر عمل می‌کنیم:0. ابتدا سرویس ضدتحریم مانند شکن را در موبایل و رایانه اجرا میکنیم!1. ابتدا وارد تنظیمات تلفن‌همراه شده و سپس از بخش about phone هفت بار روی build number ضربه می‌زنیم تا developer mode موبایل فعال شود.2. در بخش developer option گزینه usb debugging را فعال می‌کنیم.3. موبایل را به رایانه متصل می‌کنیم.4. وارد کروم رایانه می‌شویم و سپس عبارت زیر را درون address bar مرورگر وارد کنید:chrome://inspect/#devicesباید با چنین صفحه‌ای در کروم روبرو شویم :دستگاه های متصل به کرومطبق تصویر ما میتوانیم از دو مرورگر کروم موبایل و kiwi browser موجود در دستگاه ABR-LX9 استفاده کنیم.5. وارد مرورگر موبایل شده یا از طریق باکس مشخص‌شده آدرس صفحه مورد نظر را وارد میکنیم:6. سپس از لیست صفحات باز شده درون موبایل گزینه inspect را انتخاب میکنیم: اکنون میتوانیم به لاگهای کنسول کرومیوم موبایل دسترسی داشته باشیم.دقت کنید نسخه های کروم موبایل و رایانه باید آخرین نسخه باشد.این ویژگی ممکن است در ایران به درستی کار کند و نیاز به ابزارهای ضدتحریم مانند شکن باشد.

ابزار redux toolkit

عباس باقری — Fri, 10 Mar 2023 11:53:16 +0330

ابزار redux toolkit بوجود آمده است تا استفاده برنامه نویسان از redux را آسانتر کند.برای استفاده از redux toolkit ابتدا آنرا به پروژه جاوااسکریپت خود اضافه میکنیم :npm install @reduxjs/toolkit react-reduxساخت sliceابتدا یک فایل بنام store/counterSlice.ts ایجاد میکنیم. برای ایجاد slice ، ابتدا تابع createSlice را از @redux-toolkit به فایل خود ایمپورت میکنیم :import { createSlice } from '@reduxjs/toolkit';تابع createSlice بعنوان ورودی یک object با سه پراپرتی دریافت میکند :interface CounterState { value:number; } const initialState:CounterState = { value:0, } const counterSlice = createSlice({ name: 'counter', initialState, reducers:{ increment: (state,action) => { state.value += action.payload }, decrement: (state) => { state.value -= 1 }, } });پراپرتی name : باید یک نام یکتا برای هر slice در نظر بگیریم.پراپرتی initialState : حالت شروع برای هر slice می‌باشد.پراپرتی reducers : همه reducerهای مرتبط به یک slice را مشخص میکند.در این مثال counterSlice دو reducer برای کاهش و افزایش مقدار شمارنده دریافت میکند.هر reducer دو ورودی دارد. state و action که اختیاری است.برای استفاده از یک slice باید reducer و action های ایجاد شده برای آن slice را export کنیم :export const {increment , decrement} = counterSlice.actions; export default counterSlice.reducer;فایل counterSlice.ts :import { createSlice } from '@reduxjs/toolkit'; interface CounterState { value:number; } const initialState:CounterState = { value:0, } const counterSlice = createSlice({ name: 'counter', initialState, reducers:{ increment: (state,action) => { state.value += action.payload }, decrement: (state) => { state.value -= 1 }, } }); export const {increment , decrement} = counterSlice.actions; export default counterSlice.reducer;درون یک برنامه میتوان چندین slice مختلف ایجاد کنیم. برای مثال دیتای هر بخش برنامه را درون یک slice قرار میدهیمایجاد store :برای ایجاد store ابتدا تابع configureStore را به فایل store.ts ایمپورت میکنیم :import { configureStore } from '@reduxjs/toolkit';سپس reducer مربوط به هر slice را درون فایل خود import میکنیم.import counter from './counterSlice'; ...در این پروژه فقط یک slice داریم.برای ایجاد store از تابع configutrStore بجای createStore استفاده میکنیم :const store = configureStore({ reducer:{ counter, ... } });این تابع یک object در ورودی دریافت می‌کند. پراپرتی اصلی که باید مقدار دهی کنیم پراپرتی reducer می‌باشد. این پراپرتی لیست کامل reducer های مربوط اسلایس ها را دریافت می‌کند.فایل store/index.ts : import { configureStore } from '@reduxjs/toolkit' import counter from './counterSlice'; const store = configureStore({ reducer:{ counter, } }) // Infer the `RootState` and `AppDispatch` types from the store itself export type RootState = ReturnType // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} export type AppDispatch = typeof store.dispatch export default store;استفاده در کامپوننتهای برنامهبرای استفاده از store در کامپوننتها باید همانند قبل store را به برنامه خود معرفی کنیم :import { Provider } from 'react-redux'; import store, { RootState } from './store'; function App() { return ( ); }برای نمایش مقدار state به سراغ component خود رفته و با استفاده از هوک useSelector مقدار شمارنده را نمایش میدهیم :import { useSelector, useDispatch } from 'react-redux/es/exports'; function Counter(){ const counter = useSelector((store:RootState)=>store.counter.value); return (<>

{counter}

) }برای تغییر مقدار شمارنده باید از اکشنهای ایجاد شده هر slice استفاده کنیم:function Counter(){ const counter = useSelector((store:RootState)=>store.counter.value); const dispatch = useDispatch(); return (<>

{counter}

) }

ذخیره حالات برنامه با کتابخانه redux-persist

عباس باقری — Sun, 26 Feb 2023 13:56:30 +0330

با کمک کتابخانه redux-persist می‌توان حالات برنامه را در مرورگر ذخیره کردموقعی که از ریداکس استفاده میکنیم، با هر بار رفرش صفحه، مقادیر state های ریداکس از حافظه رم پاک می‌شوند. ابزار redux-persist به ما کمک میکند، مقادیر stateهای redux را در جایی مانند localstorage مرورگر ذخیره کنیم. با مراجعات بعدی کاربر به صفحه، این ابزار مقادیر ذخیره شده در ذخیره‌گاه محلی مرورگر را، به کاربر نمایش می‌دهد.برای این مقاله من یک شمارنده ایجاد شده است :حالت شروع یا initialState برنامه :const initialState = { loading:true, counter:0, nightMode: false, }اعمال کننده یا reducer برنامه :import initialState from '../initialState' import {State} from '../initialState' function reducer ( state:State=initialState , action:any ){ switch (action.type){ case 'COUNTER_UP': const counter = state.counter; return { ...state, counter:counter+1, } default: return state; } }با هر ارسال اکشن COUNTER_UP به store ، مقدار شمارنده یک واحد افزایش می‌یابد.اکنون میتوانیم store را ایجاد کنیم :import { legacy_createStore as createStore,Store, applyMiddleware} from 'redux'; import initialState from './initialState'; import reducer from './reducer'; const store:Store = createStore( reducer, initialState );export {store};اکنون میتوانیم در اپ خود از store استفاده کنیم :import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux/es/exports'; import App from './App'; import {store} from './store'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( );برای دریافت مقدارهای state ریداکس و همچنین ارسال اکشن به store در کامپوننت App.jsimport { useSelector } from 'react-redux' import { useDispatch } from 'react-redux/es/exports' function App() { const counter = useSelector((state)=>state.counter); const dispatch = useDispatch(); const counterUp = () => { dispatch({type:'COUNTER_UP'}); } return (<>

{counter}

); } export default App;نتیجه کار تا اینجا : شمارنده بدون redux-persist همین‌طور که درون تصویر مشخص است، با هر بار رفرش مرورگر، مقدار شمارنده پاک می‌شود.1. نصب redux-persist برای اضافه کردن redux-persist به پروژه جاوااسکریپت خود فقط کافیست دستور زیر را در ترمینال وارد کنیم.npm install redux-persist2. کانفیگ redux-persistبرای استفاده از redux-persisit نیازی به ایجاد تغییر در reducer و اکشنها نداریم. فقط کافیست درون فایل store تغییرات کوچکی ایجاد کنیم، ابتدا نیاز به یک تعیین persistConfig برای redux-persist داریم :آبجکت persistConfig ، مجموعه‌ای از پراپرتیهای از پیش مشخص شده است.import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web const persistConfig = { key: 'root', storage: storage, blacklist: ['loading'] };پراپرتی key :کلید دسترسی به محتوای ذخیره شده است.پراپرتی storage : محل ذخیره حالات برنامه را تعیین میکند، برای استفاده در محیط وب، معمولا از localstorage استفاده میشود.برای استفاده از redux-persist مقداردهی storage و key الزامی است ولی سایر پراپرتی‌ها اختیاری می‌باشد.پراپرتی blacklist : لیست state هایی که نمیخواهیم در localstorage ذخیره شوند را مشخص میکنیم.پراپرتی whitelist : برعکس blacklist، لیست stateهایی که میخواهیم در localstorage ذخیره شوند را مشخص میکند.import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web const persistConfig = { key: 'root', storage: storage, blacklist: ['nightMode','counter'] };فقط یکی از پراپرتیهای blacklist و یا whitelist را مقدار دهی میکنیم.پراپرتی version : نسخه state را مشخص میکند. برای زمانی که برنامه خود را آپدیت میکنیم میتواند مفید باشد.پراپرتی debog : مقدار boolean دریافت میکند و مشخص میکند که همزمان با تغییرات log در کنسول ثبت شود یا خیر!پراپرتی stateReconciler : نحوه تطبیق دادن state ها را مشخص میکند.3. ساخت persistorباید ابتدا reducer پایه خود را به کمک تابع persistReducer ، برای استفاده در استور به persistedReducer تبدیل کنیم و سپس آنرا به createStore بجای reducer پاس دهیم.import reducer from './reducer'; import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; const persistConfig = { key:'root', storage, blacklist:['loading'], } const persistedReducer = persistReducer( persistConfig , reducer ); const store:Store = createStore( persistedReducer, );اکنون با استفاده از store می‌توان persistor مناسب را ایجاد کرد:import persistStore from 'redux-persist/es/persistStore'; const persistor = persistStore(store);برای استفاده در برنامه باید persistor را همراه با استور export کرد :export {store , persistor};فایل کامل store.js :import { legacy_createStore as createStore,Store, applyMiddleware} from 'redux'; import reducer from './reducer'; import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import persistStore from 'redux-persist/es/persistStore'; const persistConfig = { key:'root', storage:storage, blacklist:['loading'] } const persistedReducer = persistReducer( persistConfig , reducer ); const store:Store = createStore( persistedReducer, ); const persistor = persistStore(store); export {store , persistor};4. استفاده از persistor در برنامهبرای استفاده از persistor باید برنامه خود را بوسیله کامپوننت PersistGate بپوشانیم، و مقدار persistor را بعنوان props به آن پاس دهیم :import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux/es/exports'; import App from './App'; import {persistor, store} from './store'; import { PersistGate } from 'redux-persist/integration/react'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( );اکنون تغییرات حالات برنامه در storage ذخیره می‌شود و با رفرش صفحه به آن دسترسی خواهیم داشت. خروجی برنامه به این شکل است :شمارنده با استفاده ار redux-persist

استفاده از کتابخانه redux-saga

عباس باقری — Fri, 24 Feb 2023 17:50:36 +0330

کتابخانه redux-saga به ما کمک میکند تا بتوانیم توابع action creator ناهمزمان ایجاد کنیم.1. نصب redux-sagaبرای استفاده از redux-saga ابتدا آنرا به پروژه خود اضافه میکنیم :npm install redux react-redux redux-saga2. ساخت worker هافرض کنید ما درون پروژه خود میخواهیم از سمت سرور، لیست کاربران را دریافت کنیم. redux-saga در حقیقت یک middleware هست که اکشنهایی که به store ارسال می‌شوند را watch میکند و در مثال ما اگر type اکشن برابر با FETCH_USER_LIST بود، از سرور اطلاعات را بارگیری میکند و نتیجه را برای store ارسال میکند.برای راحتی کار یک فایل بنام sagas.js ایجاد میکنیم. در این فایل ابتدا worker های مورد نیاز خود را اضافه میکنیم :دقت کنید worker ها یک تابع سازنده یا function generator هستند.import { call, put, takeEvery } from 'redux-saga/effects'; function fetchUsersApi(apiUrl) { return fetch(apiUrl) .then(response => response.json()) .catch(error => ({ error })) } // workers function* fetchUsers() { try { const response:Response = yield call(fetchUsersApi,'https://dummyjson.com/users'); yield put({ type: 'USER_FETCH_SUCCEEDED', users: response }); } catch (error) { yield put({ type: 'USER_FETCH_FAILED', message: error }) } }ابتدا worker ساخته شده را بررسی میکنیم :// workers function* fetchUsers() { try { const response:Response = yield call(fetchUsersApi,'https://dummyjson.com/users'); yield put({ type: 'USER_FETCH_SUCCEEDED', users: response }); } catch (error) { yield put({ type: 'USER_FETCH_FAILED', message: error }) } }ابتدا بوسیله تابع call میتوانیم از api اطلاعات را بگیریم و پس از آماده شدن response اکشن USER_FETCH_SUCCEEDED را با استفاده از تابع put برای store ارسال میکنیم یا اصطلاحا dispach کنیم. ما میتوانیم تعداد زیادی worker تعریف کنیم، برای این مثال من دو worker نیاز دارم :function* fetchUserById(action){ const id = action.payload.id; try { const response:Response = yield call(fetchUsersApi,'https://dummyjson.com/users/'+id); if(response.status){ yield put({ type: 'USER_BY_ID_FETCH_SUCCEEDED', users: response }); }else{ yield put({ type: 'USER_BY_ID_FETCH_FAILED', message: 'error' }) } } catch (error) { yield put({ type: 'USER_BY_ID_FETCH_FAILED', message: error }) } }این worker هم همانند worker بالا ابتدا اطلاعات را از api میخواند و بر اساس نتیجه نوع response اکشن مناسب برای store می فرستد3.ایجاد watcherوظیفه watcher بسیار ساده است. این تابع همواره در سطح middleware نگهبانی می‌دهد و با توجه به type اکشن ، worker مناسب را صدا میزند. برای درک بهتر این موضوع watcher خود را به فایل sagas اضافه میکنیم ://watcher function* mySaga() { yield takeEvery('FETCH_USER_LIST', fetchUsers); yield takeEvery('FETCH_USER_BY_ID', fetchUserById); } export default mySaga;تابع watcher هم همانند worker از نوع تابع سازنده می‌باشد.این تابع با توجه به type اکشن، worker مورد نظر را صدا میزند. ما میتوانیم هز تعداد worker را درون تابع watcher خود اضافه کنیم. همین طور که از export مشخص است، ما در نهایت mySaga را برای استفاده در store لازم داریم. تابع takeEvery دو ورودی دریافت میکند، ورودی اول type اکشنهاست و ورودی دوم worker مرتبط با هر اکشن می‌باشد.میتوان بجای takeEvery از تابع takeLatest هم استفاده کرد، اما این دوتابع دقیقا مثل یکدیگر عمل نمیکنند، تابع takeLatest همواره فقط یک درخواست fetch را بررسی میکند واگر درخواست دیگری از قبل بود، آن درخواست متوقف میکند.فایل saga.js :import { call, put, takeEvery } from 'redux-saga/effects'; function fetchUsersApi(apiUrl:string) { return fetch(apiUrl) .then(response => response.json()) .catch(error => ({ error })) } // workers function* fetchUsers() { try { const response:Response = yield call(fetchUsersApi,'https://dummyjson.com/users'); yield put({ type: 'USER_FETCH_SUCCEEDED', users: response }); } catch (error) { yield put({ type: 'USER_FETCH_FAILED', message: error }) } } interface Action{ type:'FETCH_USER_BY_ID' payload:number; } function* fetchUserById(action:Action){ const id = action.payload; try { const response:Response = yield call(fetchUsersApi,'https://dummyjson.com/users/'+id); if(response.status){ yield put({ type: 'USER_BY_ID_FETCH_SUCCEEDED', users: response }); }else{ yield put({ type: 'USER_BY_ID_FETCH_FAILED', message: 'error' }) } } catch (error) { yield put({ type: 'USER_BY_ID_FETCH_FAILED', message: error }) } } //watcher function* mySaga() { yield takeEvery('FETCH_USER_LIST', fetchUsers); yield takeEvery('FETCH_USER_BY_ID', fetchUserById); } export default mySaga;4. معرفی میان افزار saga به storeپس از آماده شدن warcher ، باید saga را بعنوان یک middlewar به redux معرفی کنیم. به سراغ جایی میرویم که store خود را ایجاد کرده بودیم :import { legacy_createStore as createStore,Store, applyMiddleware} from 'redux'; import initialState from './initialState'; import reducer from './reducer'; import createSagaMiddleware from 'redux-saga'; import mySaga from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store:Store = createStore( reducer, initialState, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(mySaga); export default store;ابتدا تابع createSagaMiddleware را از redux-sage به فایل خود import میکنیم. و به‌وسیله این تابع یک sagaMiddleware ایجاد میکنیم :import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware();میان‌افزار sagaMiddleware را به store خود به عنوان یک middleware پاس میدهیم :const store:Store = createStore( reducer, initialState, applyMiddleware(sagaMiddleware) );پس از آن، باید watcher را که درون فایل saga.js ایجاد کرده بودیم به sagaMiddleware بدهیم :sagaMiddleware.run(mySaga);5. استفاده در برنامه به سراغ فایل App.js میرویم :import { useEffect} from 'react'; import { useSelector } from 'react-redux'; import { useDispatch } from 'react-redux/es/exports'; import {State} from './store/initialState'; function App() { const loading = useSelector((state)=>state.loading); const users = useSelector((state)=>state.users); const dispatch = useDispatch(); useEffect(()=>{ dispatch({type:'FETCH_USER_LIST'}) },[]); useEffect(()=>{ console.log(users); },[users]) if(loading){ return

Loading

} return

Loaded!

} export default App;در این برنامه وقتی کامپوننت رندر شود اکشن زیر برای store ارسال میشود :dispatch( {type:'FETCH_USER_LIST'} ) در سطح middleware وقتی که watcher با اکشنی که type آن مقدار FETCH_USER_LIST را دارد، روبرو می‌شود، worker متناظر با آن یعنی fetchUsers را صدا می‌زند ://watcher function* mySaga() { yield takeEvery('FETCH_USER_LIST', fetchUsers); ... }سپس درون این worker عملیات fetch از طریق api صورت گرفته و براساس api برگشتی، اکشن مورد نظر به store ارسال (dispatch) میشود، و در reducer بر روی state تغییرات اعمال میشود.function* fetchUsers() { try { const response:Response = yield call(fetchUsersApi,'https://dummyjson.com/users'); yield put({ type: 'USER_FETCH_SUCCEEDED', users: response }); } catch (error) { yield put({ type: 'USER_FETCH_FAILED', message: error }) } }امیدوارم پست مفید واقع شود.

رفع و حذف منابع مسدود کننده رندر

عباس باقری — Fri, 17 Feb 2023 12:21:14 +0330

رفع و حذف منابع مسدودکننده رندر به معنای تنظیم یک اولویت مناسب جهت بارگیری سورسهای ضروری و غیرضروری است.این پست ترجمه‌ای از این مطلب میباشد. ممکن است نوع جمله بندی به کاررفته با منبع اصلی متفاوت باشد. ممکن است بنا بر توصیه خود مطلب بخشهای غیر ضروری هم حذف شده باشند :)فایلها و سورسهای مختلف مانند HTML ، CSS و جاوااسکریپت در کنار همدیگر محتوا و ظاهر و عملکرد صفحات وب را تشکیل می‌دهند و به کاربران اجازه میدهند با صفحه شما ارتباط برقرار کنند.کدهای MTML چگونگی بارگیری سورسهای مختلف را تعیین میکند. بهینه سازی ساختار لینک‌دهی به سورسهای مختلف (مانند جاوااسکریپت و فایل استایل) در این کدها، میتواند کمک بسیار مهم و موثری به بهبود (زمان) بارگیری و نمایش صفحه شما کند.مسدود کننده رند یا Eliminate render-blocking چیست؟اگر شما در سرویسهایی مانند Google's PageSpeed سرعت وب‌سایت خود را تست کنید میتوانید معیار Eliminate render-blocking resources را در لیست معیارهای سنجش سرعت سایت خود ببینید. کنترل منابع مسدودکننده رندر (به عبارتی منابع کاهش‌دهنده سرعت رندر وب‌سایت) میتواند به افزایش سرعت وب‌سایت کمک کند. موقعی که کاربران وارد صفحه وب میشوند، مرورگر، ابتدا کدهای HTML را بارگیری و پردازش میکند و سپس منابع خارجی مانند فایلهای استایل، جاوااسکریپت و تصاویر به صفحه اضافه میشوند. ترتیب تفسیر این منابع و نمایش آنها روی صفحه critical rendering path نامیده می‌شود و همچنین تاثیر مهمی روی سرعت بارگیری و نمایش صفحات دارد.عبارت Render blocking به معنای مواردی همچون تگ script و link است، که تا وقتی هنوز به طورکامل بارگیری نشده‌اند، فرایند رندر صفحات را متوقف میکنند. و نتیجه آن هم تاخیر نمایس (افزایش زمان) نمایش محتوا به کاربر است. به مثال زیر دقت کنید :