آموزش ریداکس با تصویر شماره (یک)

بسم الله الرحمن الرحیمسلام علیکمبرای اینکه بتوانیم ریداکس (redux)را یادبگیریم به تصویر مقابل نگاه کنید و نوشته های زیر را با تصویر تطابق دهید و مدام به تصویر برگردید تا تصویر سازی در ذهن تان به درستی صورت گیرد .آموزش ریداکس (redux)هر یک از شماره‌هایی که در این تصویر می‌بینید توضیح داده می‌شود. و بعد داستان کلی گفته می‌شودشماره یک: فکر کنید یک قفسه کتاب دارید که داخل آن چندین کتاب وجود دارد و قرار است روی هرکدام از کتاب‌ها یک کار انجام شود. شماره دو: که اسمش اکشن (action) است شامل یک سری اسم هست که آن‌ها را داخل کیسه تایپ (type) گذاشته است در واقع اسم‌ها داخل آن قرار می‌گیرند. شماره سه: که اسمش را ردیوسر (reducer) گذاشتیم داخلش یک سری دستورات وجود دارد و هر دستور و نحوه انجام آن در آنجا نوشته شده است و هر دستور یک اسمی داردشماره چهار: این‌ها نحوه انجام دستورات است مثلا در یک دستور پاره کردن قسمتی از کتاب هست، دستور دیگر چسباندن عکس وسط کتاب هست و دستور دیگر مثلا بو کردن کتاب است. شماره پنج: دوباره همان قفسه کتاب است منتهی بعد از اینکه دستوری روی یک کتاب انجام شد باید کتاب را داخل این قفسه قرار دهیم. شماره شش: ایشون که اسمشون دیسپچ (dispath) هست در واقع رئیس هستند و کارشون هم دادن دستور به یکی از اکشن‌ها هست یعنی هر موقعی یکی از اکشن‌ها را صدا می‌کند همان که در شماره دو مشخص کردیم یعنی می‌گوید الان مثلا اکشن شماره دو برود. شماره هفت: اسمشون سابسکرایب هست (subscribe) ایشون نگهبان اینجا هستند و هرکاری که انجام می‌شود را ثبت می‌کنند و ورود و خروج‌ها را نگاه می‌کنند و بر اونها نظارت دارند. شماره هشت: اسمشون میدل ویر (middleware) هست و کارشون این هست که دستوراتی که از رئیس (dispath) می‌آید را به آن یک کیسه اضافه می‌کنند و داخل اکشن می‌فرستند که در این صورت اکشن دو کیسه خواهد داشت یکی کیسه تایپ برای اسم‌ها و دیگری کیسه‌ای که از میدل ویر آمده و اسمش پی لود (payload) هست.توضیح در داخل کد متن : لطفا این کدمتن رو باتصویر تطبیق دهید اگر بتوانید یک شکل از این فرآیند در ذهن خود درست کنید آن وقت مثل خاطرات زندگی تون می شه و خیلی راحت می توانید یادآوری کنید و در ذهن خود به راحتی آن را ویرایش کنید و بهش فکر کنید . بانگه داشتن دکمه شیفت و بالا و پایین کردن چرخنده موشواره می توانید به صورت افقی در صفحه کدمتن جابه جا شوید.// in the name of the universe programmer /** * برای اینکه بتوانیم از ریداکس استفاده کنیم باید آن را وارد کنیم *که در اینجا با دستور زیر این کار را انجام می دهیم */ const redux = require('redux'); /** *دستور زیر برای وارد کردن شخصیت میدل ویر است در واقع میدل ویر داخل این محیط کار می کند که در داستان بالا گفته شد که کار میدل ویر این است که یک عملیاتی روی اسم هایی که رئیس می فرستد انجام می دهد و بعد نتیجه عملیات را همراه اسم برای اکشن می فرستد میدل ویر های زیادی وجود دارند ولی برای اینکه بتوانند کار کنند باید وارد این محیط شوند */ const applyMiddleware = redux.applyMiddleware; /** دستور زیر یک میدل ویر خاص که کارش گرفتن یک سری اطلاعات از پایگاه داده است را وارد می کند در واقع توابع غیرهمزمان داخل این میدل ویر می توانند کار کنند */ const thunkMiddleware = require('redux-thunk').default /** این همان ابزاری است که به صورت غیر همزمان کار می کند و برای استفاده از آن باید حتما میدل ویر بالایی را وارد کنیم تا درست کار کند */ const axios = require('axios'); /** در اینجا یک تابع که باعث می شود ردیوسر راه اندازی شود را وارد می کنیم این تابع ردیوسر را می گیرد و آن را راه اندازی می کند */ const createStore = redux.createStore; /** این قسمت در واقع همان کتابخانه ماست که داخل اش یک سری چیز وجود دارد که قرار است روی آنها کاری انجام شود */ const ketabKhaneh = { barGozari : 0, karbarHa : [ ], khata : ' ' } /** در این قسمت اسم های ما قرار دارند که در واقع همان اسم هایی هست که در کیسه تایپ(شخصیت شماره سه) وارد می شود */ const GEREFTANE_KARBAR_DARKHAST = 'GEREFTANE_KARBAR_DARKHAST'; const GEREFTANE_KARBAR_MOVAFFAG = 'GEREFTANE_KARBAR_MOVAFFAG'; const GEREFTANE_KARBAR_SHEKAST = 'GEREFTANE_KARBAR_SHEKAST' /** این همان اکشن ما هست که داخل اش یک کیسه تایپ وجود دارد و داخل آن تایپ یک اسم وجود دارد که با اسم های بالایی یکی است در واقع یکی از اسامی بالا را در اینجا قرار می دهیم و هر اکشنی یک اسم باید در داخل کیسه تایپ اش باشد */ const darkhasteDaryafteKarbar = () => { return { type: GEREFTANE_KARBAR_DARKHAST } } /** این هم یک اکشن دیگر است ولی با این تفاوت که این اکشن دو عدد کیسه دارد یکی کیسه ی تایپ است و دیگری کیسه ای به نام پی لود گفتیم که یکی از کارهای میدل ویر (شخصیت شماره هشت ) اضافه کردن یک کیسه دیگر به اکشن می باشد . */ const daryafteMovaffageKarbar = (karbarHa) => { return { type: GEREFTANE_KARBAR_MOVAFFAG, payload: karbarHa } } /** این هم یک اکشن دیگر می باشد که باز هم یک کیسه اضافی دارد به نام پی لود */ const shekasteDaryafteKarbar = (khata) => { return { type: GEREFTANE_KARBAR_SHEKAST, payload: khata } } /** این هم ردیوسر هست همان که گفتیم یک سری دستورات دارد و طبق یک اسم که برایش می آید دستوری که مطابق آن اسم هست را پیدا می کند و انجام می دهد دو تا ورودی دارد یکی همین کتابخانه های ما هست که بالا گفتیم و در قسمت استیت وارد می شود ودر واقع ورودی اول ما هست و ورودی دوم هم همان اکشن هست که یک اسم را رئیس از اطریق اکشن به ردیوسر می فرستد . */ const reducer = (state = ketabKhaneh , action)=>{ در اینجا ردیوسر از طریق اکشن به کیسه تایپ دسترسی پیدا می کند ویکی از دستوراتی که با آن یکی هست را اجرا می کند هر مورد (کیس) که با اسم آمده از کیسه ی تایپ اکشن , یکی بود را اجرا می کند switch(action.type){ case GEREFTANE_KARBAR_DARKHAST : اینها همان دستورات ما هستند که ردیوسر باید اجرا کند return { در اینجا کتابخانه ما که با نام استیت وارد این ردیوسر شده است همه اش را بدون تغییر می گذارد و فقط کتاب بارگذاری را مقدارش را یک می گذارد ...state, barGozari: 1 } اکشنی که اسم اش با این مورد یکی باشد باید یک کیسه اضافی هم همراه خود داشته باشد همان کیسه ای که گفتیم میدل ویر به بعضی از اکشن هایی که رئیس می فرستد اضافه می کند case GEREFTANE_KARBAR_MOVAFFAG: return { در اینجا هم کتاب بارگذاری مقدار صفر را می گیرد ولی کتاب کاربرها کیسه ی پی لود اکشن را هم به خود اضافه می کند و کتاب خطا هم مقدار خالی را می گیرد barGozari: 0, karbarHa: action.payload, khata: ' ' } اکشنی که اسم اش با این مورد یکی باشد باید کیسه پی لود را هم با خودش داشته باشد case GEREFTANE_KARBAR_SHEKAST : return { در اینجا هم کتاب بارگذاری را برابر صفر قرار می دهیم و کتاب کاربرها را هم مقدار خالی قرار می دهیم و کتاب خطا رو هم از کیسه پی لود چیزی که آورده را قرار می دهیم barGozari: 0, karbarHa: [ ], khata: action.payload } } } const gereftaneKarbar = () => { return function(dispatch){ axios.get('http://127.0.0.1:5000/api/products') .then(Pasokh =>{ const karbarHa = Pasokh.data.map(karbar) dispatch(fetchUsersSuccess(users)) }).catch(error =>{ dispatch(fetchUsersFailure(error.message)) }) } } /** در کدمتن زیر یک تابع وجود دارد که باعث راه اندازی ردیوسر می شود و ما باید به این تابع یعنی کریت استور, ردیوسر و محیطی که در بالا گفتیم بعضی از میدل ویر ها(شخصیت شماره هشت ) برای کار کردن به آن محیط نیاز دارند را به این تابع بدهیم تا اگر رئیس اکشنی را صدا کرد که باید اول توسط یک میدل ویر یک کیسه ی پی لود به آن اضافه شود هم بتواند در محیط ایجاد شده کار کند . */ const store = createStore( reducer , applyMiddleware(thunkMiddleware )) /** در اینجا نگهبان خود را به کار می گیریم همان شخصیت شماره هفت که سابسکرایب نام داشت و وظیفه اش کنترل ورودی و خروجی ها بود در اینجا می گوییم هر موقع یک اکشنی اجرا شد با تابع (گت استیت) مقدار کتابها را برگردان تا بدانیم روی کتابها چه کاری صورت گرفته است */ store.subscribe( () => { console.log(store.getState()) } ) حالا نوبت آن رسیده است که از کارهایی که انجام دادیم استفاده کنیم و نحوه کارکرد آنها را ببینیم در اینجا یک تابع تعریف می کنیم که قرار است یک مقدار هایی را از جایی بگیرد const gereftaneKarbar = () => { return function(dispatch){ در اینجا با استفاده از ابزار اکسیوس که در بالا وارد کردیم به یک نشانی می رویم و یک چیزی هایی را از آنجا می گیریم axios.get('http://127.0.0.1:5000/api/products') در اینجا می گوییم اگر توانستی از نشانی چیزی بگیری هر چیزی که از نشانی گرفتی را در داخل پاسخ بریز .then(Pasokh =>{ از داخل پاسخ آمده , کاربرها رو با تابع مپ بگیر و در داخل متغیر کاربرها قرار بده const karbarHa = Pasokh.data.map(karbar) در اینجا توسط رئیس یا همان دیس پچ می گوییم که daryafteMovaffageKarbar اکشن را صدا کن و کاربرها رو هم به کیسه پی لود آن اضافه کن که با این کار در واقع مقدار کیسه تایپ و کیسه پی لود به ردیوسر ارسال می شود و در آنجا گرفته شده و اسم دستوری که با اسم داخل کیسه تایپ در اکشن یکی باشد اجرا می شود dispatch(daryafteMovaffageKarbar(karbarHa)) با دستور کچ زیر می گوییم اگر نتوانستی چیزی از نشانی بگیری خطای اتفاق افتاده رو داخل خطا بریز }).catch(khata =>{ در اینجا می گوییم به وسیله رئیس shekasteDaryafteKarbar اکشن را صدا کن و خطا رو هم به کیسه پی لود آن اضافه کن dispatch(shekasteDaryafteKarbar(khata.message)) }) } } در اینجا با رئیس تابعی که در بالا نوشتیم و داخل آن از اکشن استفاده کردیم را صدا می کنیم تا اجرا شود و اکشن های داخل آن هم اجرا شوند. store.dispatch(gereftaneKarbar()) اگر براتون مفید بود خدای برنامه نویس 10000000000000000000000,000000, ...... مولکول آب رو شکر کنید و همیشه به اون عظمت امید ببندید .