یه هوک جذاب ! (useRedux) ?

چی؟! useRedux؟!! ?

بله.

الان میخوام یه تولز خفن بهت یادم که کارهای مربوط به ریداکست رو مثل باقلوا انجام بده.

فقط اول باید این چندتا چیز رو بلد باشی تا بتونی متوجه بشی که من چه کردم:

• هوک (Hook)
• ریداکس (Redux)

الان نمیخوام وارد هوک و ریداکس بشم چون پایه این مقاله بر اساس بلد بودن این دو هست.

تو همین سایت ویرگول دوستان بسیاری درباره هوک کاملا توضیح دادن که پیشنهاد میکنم اول اونا رو مطالعه کنی بعد بیای ادامه راه و با هم بریم ?

بریم useRedux رو بسازیم ☺️

اول از همه برای اینکه این پروژتون یه مقدار سر و سامون بگیر بیاین تو روت پروژه یه فولدر hooks بسازید و تمام هوک هاتون رو توش تعریف کنید.

حالا بیاین تو همون فولدری که ساختین (hooks) یه فایل به نام useRedux.ts بسازید (من برای اینکه کارتون راحت تر بشه تو استفاده کردن ازش اومدم از تایپ اسکریپت استفاده کردم که بهمون پیشنهاد بده)

حالا بیاین تو فایلی که ساختین هوکتون رو درست کنید:

خب بزارید درباره کانتکست این useRedux عزیزمون یه توضیحی بهتون بدم که دقیقا باید چه کاری رو برامون بکنه.

کله بدبختی ما سر اضافه کردن و یا ادیت کردن استیت‌هاست که باید الان تو قالب گلوبال باشه. برای همین اومدن redux و context و ... رو تعریف کردن. (تا اینجا اوکی؟)

حالا ما با نوشتن یک هوک ساده میایم سه عمل اصلی (دریافت , ذخیره , ریست) رو به راحتی هندل میکنم.

پس میایم سه تا تابع به نام‌ها Get , Save و Reset تعریف میکنم و اون ها رو تو آبجکتی که هوکمون دار return میکنه , اضافه میکنیم.

خب اول از اون که باید حتما react-redux و redux پروژتون کاملا اپدیت باشه تا هوک‌های ریداکس رو شامل بشه. بعد بیاید تو App.js پروژتون و موارد زیر رو ایمپورت کنید:

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import React, {useState} from 'react';
import Reducers from 'فایلی که توش کامباین ردیوسرز ریتر میشه'

بعدش به محض اینکه تابع App تعریف شده بود توش این کد رو اضافه کنید:

const App = () => {
          const [store] = useState(createStore(Reducers));
...

بعدشم که مشخص باید مثل قبلانا بیاین این استور رو به Provider پاس بدین و حتما هم Provider باید تگ اصلی اپتون باشه:

خب تا الان کانفیگ ریداکسمون رو یه مقدار دستکاری کردیم برای اینکه بتونیم از هوک های ریداکس استفاده کنیم. حالا برمیگردیم به فایل useRedux خودمون که ادامه کار رو بنویسیم.

الان ما برای تغییر دادن استیت‌هامون به یه dispatch نیاز داریم که باید بیایم اون رو از هوک useDispatch که react-redux بهمون میده دریافت کنیم.

پس اول useDispatch رو از react-redux ایمپورت کنید بعد داخل و زیر فانکشن useRedux این کد رو برای گرفتن dispatch بنویسید:

const useRedux = () => {

      const dispatch = useDispatch();
...

حالا ما dispatch رو داریم که خیلی راحت میتونیم باهاش استیت ها رو تغییر بدیم (برای تابع Save, Reset استفاده میشه)

حالی بیاین یکی یکی تابع ها رو اوکیشون کنیم:

اول بریم سراغ Get:

بیاین useSelector رو هم از react-redux ایمپورت کنید تا بتونیم استیت‌هامون رو ازش دریافت کنیم.

import {useDispatch, useSelector} from 'react-redux';

حالا بیاین زیر همون جایی که useDispatch رو تعریف کردیم و این کد رو بنویسید:

const useRedux = () => {

      const dispatch = useDispatch();
      const states = useSelector((state: ReducersStates) => state) as ReducersStates;
...

آقا فوحشم ندینا ? الان میگم ReducersStates چیه. یه لحظه صبرِلَ ??

بابا من اومدم یه چندتا اینترفیس قبلا تعریف کردم که توش تمام تایپ های استیت هام هست. نگاه کنید:

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

قابل توجه دوستانی که هنوز تایپ اسکریپت بلد نیستند (این اینترفیس ها و تایپ ها هستند که موقع دولوپ در vsCode به شما ادامه کد رو پیشنهاد میدن). پس لطف کنید و سریع سوییچ کنید رو تایپ اسکریپت تا از شر دیباگ‌های وقت گیر راحت بشید

حالا داخل بدنه تابع Get امون کافیه states رو return کنیم تا تمام state هامون رو بتونیم بعد از فراخونی کردن تابع Get بگیریم.

const Get = () => {return states}

خب تابع Get دیگه اوکی شد. از این به بعد هم هر موقع خواستین از استیت هاتون استفاده کنید کافیه این کار رو بکنید:

export const CustomButton = () => {
    const states = useRedux().Get()
...

حالا بریم سر اصل کاری که Save:

این بدنه تابع Save امون هست:

const Save = (data: UserStates | AppStates, statesType: 'user' | 'app') => {

      switch (statesType) {

            case 'app':

                data = data as AppStates;

                dispatch(appChangeData(data));

                 break;

           case 'user':

                data = data as UserStates;

                dispatch(userChangeData(data));

                break;

           }
};

بچه‌ها با تجربه سریع گرفتن که چی شد ??

دوستان عزیز. ببینید من کار شاخی نکردم به خدا.. اومدم گفتم که من کلا دوتا دسته استیت دارم (app,user) که میخوام هر موقع یه استیتی رو توشون اپدیت کنم باید بیام بگم که کدوم استیت هست و تو کدوم دسته قرار داره. (همین!)

یه نکته: اون کلمه as کارش این هست که تایپ ها رو تبدیل میکنه به هم پس درگیر اون نشید.

و اینکه appChangeData و userChangeData هر دو اکشن های من هستند:

بزارید یکی از ردیوسرهام رو هم نشون بدم:

الان میخوام به عونان مثال بیام استیت connection رو تو دسته app اپدیت کنم (یه نگاه به عکس‌های اینترفیس ها بندازید استیتام هست). برای این کار کافیه بیام بنویسم:

const {Save} = useRedux()

Save({connection: true}, 'app')

و تمام!

راحت تر از این مگه میشه اصلا؟!??

کانفیگ اولش شاید یه مقدار زمان گیر باشه (البته بیشتر از ۱۵ دقیقه کار نمی‌بر) ولی موقع استفاده کردن خیلی راحت تر.

حالا هم بریم سر اخرین تابع که همون Reset:

const Reset = (statesType: 'app' | 'user') => {

      switch (statesType) {

          case 'app':

          dispatch(appResetData());

          break;

      case 'user':

          dispatch(userResetData());

          break;

      }

};

این تابع هم که کارش ریست کردن استیت‌ها به مقدار اولیشون هست.

تبریک میگم ? ?

اقا بالاخره تموم شد و میتونید از این به بعد یه نفس راحت از دست ریداکس بکشید ?

بیاین یه بار دیگه استفاده کردن ازش رو ببینیم ?:

const {Get, Save, Reset} = useRedux();

const states = Get() یا Get().app //گرفتن استیت ها
Save({connection: true}, 'app') //ذخیره یا اپدیت کردن
Reset('app') //ریست کردن استیت app

دوستان ممنونم از اینکه مقاله من رو خوندین. من سعی کردم خیلی در فضای خودمونی و جذاب بهتون توضیح بدم و امیدوارم که تونست باشم کارتون رو راحت تر کرده باشم.

لطف کنید حتما نظر بدین چون این اولین مقاله من در ویرگول هست و اگر بازخورد ها خوب باشه بازم هم ادامه خواهم داد.

من تا میتونم دارم سعی میکنم که این useRedux رو بهینه ترش کنم. لطفا تو این کار من رو یاری کنید و اگر چیزی به ذهنتون اومد حتما تو نظرات یا به ای دی تلگرامم ارسال کنید:

تلگرام: @nodes2684

منتظر بازگشت سلطان باشید ??