https://virgool.io/feed/@ashtiani برنامه نویس فرانت اند اسنپ مارکت ، از علاقه‌مندان Javascript و React fa 2026-06-07 09:19:28 https://files.virgool.io/upload/users/62757/avatar/tAPaHg.png?height=120&width=120 https://virgool.io/@ashtiani https://virgool.io/iran-react-community/%D8%A8%D8%A7-redux-%D8%AF%D9%88%D8%B3%D8%AA-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-xhevssegr0ti تو مقاله‌ی قبلی این مساله رو بررسی کردیم که Redux برای حل چه مشکلی به وجود اومده و چطور میتونه اون رو حل کنه. اما فرآیندی که ریداکس انجام میده چیه؟قبل از اینکه وارد بررسی اجزا و فرآیند Redux بشیم، باید یه سوتفاهم رو حل کنیم. معمولا ما Redux رو همراه با ری‌اکت یاد گرفتیم و ممکنه تو ذهن ما این مساله جا افتاده باشه که ریداکس یه کتابخانه یا ماژول برای مدیریت State در ری‌اکته. اما Redux هم در Client و هم در Server میتونه استفاده بشه. یعنی یه پروژه NodeJs هم میتونه از Redux برای State Management استفاده کنه. اصولا هر اپلیکیشنی که از Vanilla Javascript استفاده میکنه میتونه از Redux بهره ببره.برگردیم به سوال خودمون؛ Redux چطور کار میکنه؟ روشی که Redux برای کار استفاده میکنه خیلی ساده است. یه Store مرکزی وجود داره که تمام State هایی که در اپلیکیشن مشترک هستند رو ذخیره میکنه و کامپوننت ها بدون اینکه مشکلات پاس دادن داده‌ها بین هم رو داشته باشن می‌تونن داده‌های دلخواهشون رو از Store بگیرن و یا با رعایت یه فرمت خاص داده بفرستن.Redux از سه بخش اساسی و مهم تشکیل شده:StoreActionReducerبرای شناختن اجزای Redux از Action شروع می‌کنیم. Action یه آبجکت ساده است. ما با استفاده از Actionها تغییری که باید در Store رخ بده رو توصیف می‌کنیم. هر Action از یه Type و یه سری داده‌های اضافه‌تر تشکیل شده. داده‌های اضافه بستگی به اون Action دارندو به طور مثال، اگر یه فرآیند لاگین رو در نظر بگیریم، نام کاربری و گذرواژه داده‌هایی هستند که در آبجکت ما قرار می‌گیرند.یه عادت خوب برنامه‌نویسی اینه که تمام داده‌های موردنظر رو به صورت یک آبجکت درآورده، داخل Action قرار بدیم که معمولا با نام Payload دیده می‌شه.اما Type بخش اجباری هر Action به حساب میاد. یه رشته (String) که به صورت حروف بزرگ نوشته شده و گویای عملی خواهد بود که قراره انجام بشه. در مورد همون مثال لاگین، آبجکت ما به شکل زیر خواهد بود:{ type: &quotLOGIN&quot, payload: { username: 'foo', password: 'bar' } } هر اکشنی توسط یه action creator ساخته میشه. Action Creator فانکشنیه که صرفا ًآبجکت مورد نظر ما رو می‌سازه و هیچ کاری غیر از این نباید انجام بده. به طور مثال:const Login = payload => ({ type: &quotLOGIN&quot, payload, })و در نهایت آبجکتی که توسط این Action Creator ساخته می‌شه باید توسط یه فانکشن دیگه که جلوتر باهاش آشنا می‌شیم استفاده می‌شه .(Dispatch)حالا ممکنه این سوال پیش بیاد که چه چیزهایی اکشن به حساب میان؟ چیزی که من به نظرم می‌رسه اینه که هر ایونت، اینتراکشن کاربر، فراخوانی API و ... که روی State موجود در Store تاثیر مستقیم یا غیر مستقیم می‌ذاره می‌تونه کاندیدای Action شدن باشه.می‌تونیم تو یک مثال کوچیک Action رو جمع بندی کنیم: (مثال از وبسایت ریداکس برداشته شده)/* * Action Types */ export const ADD_TODO = &quotADD_TODO&quot /* * Action Creators */ export function addTodo(payload) { return { type: ADD_TODO, payload } }شاید Reducer چیزی شبیه به این باشهاگر بخوام بین اجزای Redux مهم‌ترین جز رو انتخاب کنم، رای من به احتمال خیلی زیاد Reducer خواهد بود. تصویری که من از Reducer برای خودم ترسیم می‌کنم چیزی شبیه به یه خط تولیده که به ازای هر ورودی خروجی مشخصی داره. کافیه که ورودی مطابق با استانداردهای خط تولید باشه. اون وقت حتماً خروجی قابل انتظاری ازش خواهیم داشت .به طور کلی وظیفه Reducer ایجاد یه State جدید به ازای اکشن و State ورودی است ( ایجاد State جدید، ری‌اکشن Reducer به هر اکشنه). Reducer، همون طور که از اسمش پیداست، بر مبنای تابع Reduce ساخته شده. تابع Reduce وظیفه داره که یه آرایه رو به یه مقدار واحد تبدیل کنه. Reducerها توابع Pure هستند که به عنوان ورودی:مقدار فعلی State اپلیکیشن که در Store ذخیره شدهاکشنی که فراخوانی شدهمی‌گیرن و به عنوان خروجی یک State جدید برمی‌گردونن.حالا فقط کافیه که بدونیم به چه توابعی Pure Function میگن. توابعی که وقتی یک ورودی یکسان میگیرن و بدون ایجاد Side Effect خروجی یکسانی تولید میکنن Pure Function هستند. به نظر میاد تنها نقطه‌ی مبهم توی این تعریف عبارت Side Effect باشه.هر تغییر State در اپلیکیشن که از بیرون فانکشنی که فراخوانی شده قابل رویت باشه و با مقداری که اون فانکشن برمی‌گردونه متفاوت باشه قطعا Side Effect هست. مثلا تغییر هر متغییر خارجی یا آبجکت ، نوشتن در کنسول، روی صفحه یا داخل یک فایل و ... برای جمع بندی بهتره یه قطعه کد مربوط به Reducer ها رو با هم ببینیم :import { ADD_TODO } from './actions'; const initialState = { todos: [], } function TodoReducer (state = initialState, action) { switch(action.type) { case ADD_TODO: return { ...state, todos: [ ...state.todos, action.payload ] } } } export default TodoReducerفقط به عنوان آخرین نکته ها، ما خود State رو تغییر نمیدیم بلکه با استفاده از اون و Action ورودی یک State جدید می‌سازیم و برمیگردونیم. و علاوه بر اون ما میتونیم چندین Reducer داشته باشیم و با استفاده از combineReducer اونها رو باهم تلفیق کنیم.و بالاخره آخرین بخش یعنی Store، وظیفه داره تمام درخت State اپلیکیشن رو ذخیره کنه. به صورت مستقیم نمیشه مقدارش رو تقییر داد و باید یک Action فراخوانی بشه تا توسط Reducer مقدار جدید تولید و توی Store ذخیره و قابل دسترسی باشه. Store یه کلاس نیست بلکه یه آبجکت ساده است که چندتا متد محدود برای دسترسی بهش وجود داره. وظایف Store : نگه داری از Application State دسترسی به State با استفاده از getStateبه روز رسانی State با استفاده از dispatchثبت یک Listener با استفاده از subscribeپاک کردن Listener با استفاده از تابعی که توسط subscribe برگردونده میشه.جایگزین کردن یک Reducer با Reducer دیگر با استفاده از replaceReducer که به صورت hot reloading عمل میکنه برای ساخت Store هم کافیه به شکل زیر عمل کنیم :import { createStore } from 'redux'; import todoReducer from './reducer'; const store = createStore(todoReducer); store.dispatch(addTodo('Read the docs'));توی این قطعه کد با استفاده از Reducer که قبلا ساختیم و متد createStore که از redux گرفتیم یه Store ساختیم و با استفاده از متد dispatch که روی store داریم میتونیم مقدار داخلش رو تغییر بدیم و به Todo ها یه todo جدید اضافه کنیم.وقت جمع بندیه.اپلیکیشن یه action رو dispatch میکنه . store وظیفه داره state فعلی که در store ذخیره شده و action رو به reducer (یا rootReducer که تلفیق چندین Reducer هست) تحویل میده. و در نهایت state جدید تولید میشه و داخل store ذخیره میشه. بعد از ذخیره شدن تمام کامپوننت هایی که به store وصل شدن (subscriber) تغییرات جدید رو میگیرن و خودشون رو به روزرسانی میکنن.فقط یه سوال هنوز بی جواب مونده :‌ اگه یه Async Action داشتیم Redux چطور عمل میکنه؟ امین آشتیانی امین آشتیانی Fri, 08 Nov 2019 00:14:08 +0330 https://virgool.io/snappmarket/%D8%A8%D8%A7-redux-%D8%AF%D9%88%D8%B3%D8%AA-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-uta7oow1ahif لوگوی reduxوقت صحبت کردن با یه برنامه‌نویس FrontEnd در مورد React، یاد گرفتن و استفاده از Redux یکی از نقاط تاریک بوده و هست. ما معمولا، با کمی مطالعه، شروع به پیاده‌سازی می‌کنیم و دقیقا نمی‌دونیم که Redux برای چی و کجا باید استفاده بشه. یا چطور می‌شه بهترین استفاده رو ازش داشت. توی این مقاله می‌خوام از مشکلاتی که خودم تو این راه باهاشون رو به رو بودم بگم.اولین نکته‌ای که لازم بود بدونم این بود که Redux برای چی به وجود اومده و قراره کدوم مشکل ما رو حل کنه. مشکل از جایی شروع می‌شه که هرکامپوننت توی React , Vue، یا Angular به صورت داخلی state خودشون رو مدیریت می‌کنن. تا یه مرحله‌ای این مشکل به چشم نمیاد و حتی خیلی هم خوب کار می‌کنه. ولی وقتی برنامه به سمت بزرگتر شدن میره و ارتباط بین کامپوننت‌ها بیشتر می‌شه، مدیریت state ها سخت و سخت‌تر می‌شه.بعضی از کامپوننت‌ها از یه سری state مشترک استفاده می‌کنن. به طور مثال، تو یه سیستم فروشگاهی تعداد کالاهای خریداری شده ممکنه بین تعداد زیادی کامپوننت به اشتراک گذاشته بشه. یا توی route های مختلف بهش نیاز باشه. پیدا کردن اینکه این state از کجا اومده می‌تونه واقعا گیج‌کننده باشه.از طرفی، یه دلیل معروف هم هست که بیشتر ما توی صحبتهامون از این دلیل برای استفاده از Redux استفاده میکنیم؛ «وقتی می‌خوام یه state رو از یه کامپوننت به یه کامپوننت دیگه بفرستم، باید اون رو تا نزدیک‌ترین parent مشترک lift up کنم و درنهایت به عنوان props به کامپوننت مورد نظر pass down بشه".تفاوت جابه‌جایی state با redux و بدون اونحالا می‌دونیم که مشکل کجاست. اما Redux چطور این مشکلات رو حل میکنه؟طبق تعریفی که توی سایت خودش وجود داره، Redux عزیز ما با سه تا ویژگی شاخص به ما کمک می‌کنه؛Preditctable State Updates"Pure" reducer functionCentralizing the Stateخب این ویژگی‌ها یعنی چی؟ از اولی شروع میکنیم. برای خود من هم سوال بود که این عبارت دقیقا یعنی چی. بعد از گشتن‌های فراوان، توی یه فروم جوابی از خود Dan Abramov پیدا کردم؛ «این عبارت از دوتا بخش تشکیل شده؛ state container و predictable . بخش اول یعنی این که Redux وظیفه داره state برنامه شما رو نگه داره و شما هم نمی‌تونید مستقیما مقدارش رو تغییر بدید. پس مجبورید تغییرتون رو در قالب یه action بهش تحویل بدید. از اونجایی که action ها می‌تونن ضبط و تکرار بشن، Redux میتونه predictable باشه. با همون action و با همون ترتیب فراخوانی، state شما باید مقدار یکسانی داشته باشه.ویژگی دومی که توی تعریف به چشم میخوره pure بودن reducer هاست. ما اینجا قصد نداریم بگیم pure function یعنی چی. اما اگه نمی‌دونید چی هست، می‌تونید با مطالعه صفحه ویکی پدیا یه اطلاعات مختصر به دست بیارید. pure بودن به ما این کمک رو میکنه که به ازای هر ورودی، خروجی مشخصی داشته باشیم که هیچ عامل بیرونی روش تاثیر نداره. بنابراین تست کردنش و حتی پیاده‌سازی یه سیستم logging برای تغییرات داده‌ها ساده‌تر خواهد بود.ویژگی سوم متمرکز شدن state ها در یک نقطه است. تمام state هایی که بین کامپوننت‌های مختلف مشترک هستن توی یک نقطه، اونم داخل RAM، ذخیره می‌شن. تنها مشکلی که به نظر می‌رسه داشته باشیم persist شدن یا همون موندگاریه. چون با هر رفرش، ما دیگه مقدار قبلی store رو نداریم.فعلا فهمیدیم که مشکل از کجاست و Redux چطور قراره کمکمون کنه. توی نوشته‌های بعدی اجزای مختلفش رو بررسی میکنیم. امین آشتیانی امین آشتیانی Sat, 28 Sep 2019 11:43:11 +0330