https://virgool.io/feed/@frmostafa یه برنامه نویس فرانت که هرچی بلد باشه رو اینجا یاد میده:) fa 2026-06-16 10:44:49 https://files.virgool.io/upload/users/1916421/avatar/avatar.png?height=120&width=120 https://virgool.io/@frmostafa https://virgool.io/@frmostafa/simple-redux-wgkxkrgbveld قبل از شروعتوی این مطلب خیلی خودمونی راجب ریداکس صحبت میشه . برای بعضی کلمات از فینگلیش:) استفاده کردم تا با فارسی سازی کلمات از مفهوم اصلی اونا دور تر نشیم.چرا ریداکس؟کمتر کسی پیدا میشه با اضافه کردن ریداکس به پروژه ری اکتی مخالفتی داشته باشه چون الان دیگه جز جدانشدنیه پروژس.اما همون قدیمی کار های ریداکس هم پای حرفشون بشینی از راه اندازی عجیب و غریب ریداکس حرف میزنن. بنظر منم راه اندازی ریداکس در یک پروژه جدید کار حوصله سربریه دلیل اصلیش هم همینه که برای راه اندازی اولیه و حتی در ادامه نیاز دارین کلی تکه خط کد تکراری و حوصله سر بر بزنین.مراحل و کد هایی که حتی الان دارم اینو مینویسم همه مراحلش رو یادم نمیاد!خوشبختانه دوست عزیزمون ریداکس تولکیت اینجاست تا زندگیمون رو یه پله راحت تر کنه ?مفهوم ریداکس خیلی سادسدر این قسمت نمیخوام همه فیچر های ریداکس رو بهتون توضیح بدم ولیکن میخوام کاسنپت ریداکس و کلیاتی که ازش میدونیم رو یکبار برای همیشه مرور کنیم تا توی ذهنمون بمونن.ریداکس یه متغیر حالت سراسریهریداکس برای همه ی پروژه ها ضروری نیستشما باید از ریداکس استفاده کنین اگر میخواین جلوی پراپس درلینگ رو بگیریناگر هنوز هم در مفهوم ریداکس مشکلی دارین باید اینجوری ساده توی ذهن خودتون بسازینش: ریداکس یک استیت ساده ری اکته با این تفاوت به متغییری که در ریداکس ساخته میشه همه جای برنامه میتونی دسترسی داشته باشی!شاید بازهم هم بهتره همین مفهوم رو مرور کنیم:ریداکس یه متغیر حالت سراسریه// Initial state const [count, setCount] = useState(0); // get state console.log(count); // set state setCount(1);ریداکس اساسا یه متغیر ری اکتیه . شما با متغییر های ری اکتی چه کارایی میتونین بکنین؟میتونین اونارو بگیرین (get)و تنظیم (set) کنین . درسته؟اگر همین کانسپت گت و ست توی ذهنتون باشه ریداکس هم همینجوری کارش رو انجام میده . با این تفاوت اینجا یکم با کلاس شدیم به گت میگیم سلکت و به ست میگیم دیسپچاگر میخواین این مفهوم رو دقیق تر بخونین این لینک میتونه براتون مفید باشه.و همچنین چارت زیر خیلی میتونه به درک کانسپت کمک کنه:دست به کار شو و کد بزن!بیایم یه نمونه کد ریداکس پیاده کنیمنصب ریداکس و ریداکس تولکیتnpm install @reduxjs/toolkit react-reduxایجاد استور ریداکسیبرای راه اندازی ریداکس معمولا یک پوشه داخل فولدر سورسمون به اسم استور میسازیم . داخل این فولدر درون فایل استور ریداکس رو کانفیگ میکنیم. https://virgool.io/p/wgkxkrgbveld/src/app/store.js import { configureStore } from '@reduxjs/toolkit'; export default configureStore({ reducer: {}, });استور رو بساز و تنظیمات اولیه اش رو انجام بده - configureStore این متد بعنوان ورودی فقط یدونه ابجکت میپذیره اما با پارامتر های متفاوت . به این آبجکت اصولا میگن ConfigureStoreOptionsاین ابجکت شامل پارامتر های زیر میشه:reducersmiddleware devTools4preloadedStateenhancersاین مقاله نمیتونه همه پارامتر های بالا رو پوشش بده اما این پایین مهم هاشون رو باهم بررسی میکنیم و نکاتشون رو ازشون میکشیم بیرون:reducers (object)اتربیوت ردیوسر ویژگی اجباری این آبجکته که حتما باید اون رو تکمیل کنین.نام این اتربیوت به سلکتورمون ربط داده میشه پایین تر خودتون میبینید.devTools (boolean)لینک پلاگین دو تولز برای کروم و موزیلا اینجاست.بعضی اوقات خیلی ضروریه که برای دولوپمنتمون از دوتولز استفاده کنیم . در لحظه بصورت نمایشی بهمون میگه که هر استیت در هر لحظه چه تغییری روش انجام شده و الان در کدوم حالت خودشه.این متغییر بولی بصورت پیشفرض trueهستش و اگر میخواین ازش استفاده کنین نیاز به تغییرات خاصی ندارین.preloadedState (object)این ابجکت دقیقا شبیه حالت اولیه (initial state) حالت های ری اکتیه . اگر میخواین یه حالت اولیه برای متغییرتون داشته باشین ازین اتربیوت باید استفاده کنین.کل پروژت رو با استور محاصره کناین کار باعث میشه کل اپ شما به ریداکس دسترسی داشته باشهچجوری انجامش بدم؟خیلی سادهکل کامپوننت اپت رو با یه Provider بپوشون که البته استوری که نوشتی هم باید بهش پاس بدی//... import { Provider } from 'react-redux'; import store from './app/store'; // ... <Provider store={store}> <App /> </Provider> // ...ساخت یه اسلایس ریداکس - createSlice https://virgool.io/p/wgkxkrgbveld/src/features/todo/todoSlice.js import { createSlice } from '@reduxjs/toolkit'; export const todoSlice = createSlice({ name: 'todos', initialState: [], reducers: { addTodo: (state, action) => { const todo = { id: uuid(), text: action.payload, }; state.push(todo); }, }); // this is for dispatch export const { addTodo } = todoSlice.actions; // this is for configureStore export default todoSlice.reducer;ایده اصلی اسلایس ها اینه که یک اکشن برای دیسپچ کردن تولید کنن و همزمان بتونیم ریدیوسرش رو در کانفیگ استور استفاده کنیمکلش همین چند خط کده . منتهی اینجا پیچیده ترین قسمت پیاده سازی ریداکس تولکیته بیاین قدم به قدم مرورش کنیم:من فرض رو بر این میگیرم که شما دید اولیه ای به ریداکس دارین و میدونین ریدیوسر چیه . وقتی با ریداکس تولکیت کار میکنین دیگه نیازی نیست که بطور دستی برین یدونه ریدیوسر بسازین و توی ریدیوسر هاتون سعی کد های mutable بنویسین و کلی باهاش کلنجار برین . جادو اینجاست. ریداکس تولکیت immer رو توی ساختار خودش جا داده .وقتی که شما میخواین یک استیت رو بروزرسانی کنین نمیتونی اون متغیرر رو میتیت کنی یا بصورت خودمون توی اصل اون استیت تغییری ایجاد کنین.باید یه دیتای کاملا جدید بسازین و با استفاده از اون حالتتون رو بروزرسانی کنین . دقیقا روندی که در ریداکس در پیش داریم.addTodo: (state, action) => { const todo = { id: uuid(), text: action.payload, }; // mutate the state state.push(todo); }با این وجود ایمر کارمون رو خیلی راحت کرده .میتونیم بطور مستقیم حالتمون رو میوتیت کنیم ویه نگاه هم به مثال من بکنیم میبینیم که چجوری یه استیت رو بطور مستقیم تغییر دادم و این معجزه ریداکس تولکیته .همه توضیحات راجه ایمر رو میتوینن ازینجا بخونیناضافه کردن ردیوسر به استورimport { configureStore } from '@reduxjs/toolkit'; import todoReducer from '../features/todo/todoSlice'; export default configureStore({ reducer: { todos: todoReducer, }, });خب باشه کانفیگش کردم چجوری دیتا بخونم و یا توی دیتام تغییر بدم؟وقتشه مفهوم گت و ست رو مجدد یاداوری کنیم.سلک و دیسپچبا استفاده از دو هوک یوز سلکتور و یوز دیسپچگرفتن استیت - useSelectorimport React from 'react'; import { useSelector } from 'react-redux'; export default function Todos() { const todos = useSelector((state) => state.todos); // todos comes from the reducer attribute name // in configureStore return ( <div> <ul> {todos.map((todo) => ( <li key={todo.id}> <span>{todo.text}</span> </li> ))} </ul> </div> ); }export default configureStore({ reducer: { todos: todosReducer, // state.todos comes from this attribute name }, });خب برای گرفتن داده باید از این هوک استفاده کنیم . استیت رو بعنوان پارامتر به ارو فانکشن میدیم و میتونیم کل متغییر هاشو بخونیم ، روش مپ بزنیم و هر کار دیگههمونطور که میبینید برای خودندن داده نیازی به اکشن یا ریدیوسر نداریم فقط و فقط با یه هوک سادهچجوری دیتام رو تغییر بدم؟ - useDispatchimport React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { addTodo } from '../features/todos/todosSlice'; export default function AddTodo() { const [text, setText] = useState(''); // initial the dispatch here const dispatch = useDispatch(); const addTodoHandler = (event) => { event.preventDefault(); // update the state here using addTodo action // action only receive one parameter, which is payload dispatch(addTodo(text)); setText(''); }; return ( <form ={addTodoHandler}> <input type='text' value={text} ={(e) => setText(e.target.value)} /> <button>Add todo</button> </form> ); }خب عملیات تغییرت رو باید توی ردیوسرت مینوشتی . همون کاری که من با تودو کردم . حالا با استفاده از هوک یوز دیسپچ اکشنی که در اسلایس خودت ایجاد کردی اجرا کن . به همین راحتی . تمامنتیجه گیری:بطور کلی 6 مرحله رو باید برای راه اندازی ریداکس طی کنیم:1.ریداکس تولکیت رو نصب میکنیم2.استور خودمون رو ایجاد میکنیم3.کل کامپوننت هامون رو با استور محاصره میکنیم.4.یدونه اسلایس میسازیم و اکشن هامون رو توش تعریف میکنیم5.ردیسورمون رو به استور اضافه میکنیم6.با یوز سلکتور و یوز دیسپچ گت و ست کنتبریک . شما الان ریداکستون رو بطور کامل پیاده سازی کردی. البته یادتون نره کتابخونه ریداکس همش به همینجا ختم نمیشه و کلی ابزار مفید داره مخصوصا در زمینه api ها که اگر موافق بودین توضیحات کامل و جامع اون رو هم براتون مینویسممتشکرم که این متن مطلب رو دنبال کردین ، ممنون میشم هرگونه ایراداتی در متن میبینید رو به اطلاع من برسونید تا اصلاح کنم.ارادتمند. مصطفی فاریابی مصطفی فاریابی Tue, 29 Nov 2022 12:01:48 +0330