نصب و راه اندازی ریداکس به زبون ساده(همراه با کد)

قبل از شروع

توی این مطلب خیلی خودمونی راجب ریداکس صحبت میشه . برای بعضی کلمات از فینگلیش:) استفاده کردم تا با فارسی سازی کلمات از مفهوم اصلی اونا دور تر نشیم.

چرا ریداکس؟

کمتر کسی پیدا میشه با اضافه کردن ریداکس به پروژه ری اکتی مخالفتی داشته باشه چون الان دیگه جز جدانشدنیه پروژس.اما همون قدیمی کار های ریداکس هم پای حرفشون بشینی از راه اندازی عجیب و غریب ریداکس حرف میزنن. بنظر منم راه اندازی ریداکس در یک پروژه جدید کار حوصله سربریه دلیل اصلیش هم همینه که برای راه اندازی اولیه و حتی در ادامه نیاز دارین کلی تکه خط کد تکراری و حوصله سر بر بزنین.مراحل و کد هایی که حتی الان دارم اینو مینویسم همه مراحلش رو یادم نمیاد!

خوشبختانه دوست عزیزمون ریداکس تولکیت اینجاست تا زندگیمون رو یه پله راحت تر کنه ?

مفهوم ریداکس خیلی سادس

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

• ریداکس یه متغیر حالت سراسریه
• ریداکس برای همه ی پروژه ها ضروری نیست
• شما باید از ریداکس استفاده کنین اگر میخواین جلوی پراپس درلینگ رو بگیرین

اگر هنوز هم در مفهوم ریداکس مشکلی دارین باید اینجوری ساده توی ذهن خودتون بسازینش: ریداکس یک استیت ساده ری اکته با این تفاوت به متغییری که در ریداکس ساخته میشه همه جای برنامه میتونی دسترسی داشته باشی!

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

• ریداکس یه متغیر حالت سراسریه

// Initial state
const [count, setCount] = useState(0);

// get state
console.log(count);

// set state
setCount(1);

ریداکس اساسا یه متغیر ری اکتیه . شما با متغییر های ری اکتی چه کارایی میتونین بکنین؟میتونین اونارو بگیرین (get)و تنظیم (set) کنین . درسته؟

اگر همین کانسپت گت و ست توی ذهنتون باشه ریداکس هم همینجوری کارش رو انجام میده . با این تفاوت اینجا یکم با کلاس شدیم به گت میگیم سلکت و به ست میگیم دیسپچ

اگر میخواین این مفهوم رو دقیق تر بخونین این لینک میتونه براتون مفید باشه.

و همچنین چارت زیر خیلی میتونه به درک کانسپت کمک کنه:

دست به کار شو و کد بزن!

بیایم یه نمونه کد ریداکس پیاده کنیم

نصب ریداکس و ریداکس تولکیت

npm install @reduxjs/toolkit react-redux

ایجاد استور ریداکسی

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

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

استور رو بساز و تنظیمات اولیه اش رو انجام بده - configureStore

این متد بعنوان ورودی فقط یدونه ابجکت میپذیره اما با پارامتر های متفاوت . به این آبجکت اصولا میگن ConfigureStoreOptions

این ابجکت شامل پارامتر های زیر میشه:

• reducers
• middleware
• devTools4
• preloadedState
• enhancers

این مقاله نمیتونه همه پارامتر های بالا رو پوشش بده اما این پایین مهم هاشون رو باهم بررسی میکنیم و نکاتشون رو ازشون میکشیم بیرون:

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

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,
  },
});

خب باشه کانفیگش کردم چجوری دیتا بخونم و یا توی دیتام تغییر بدم؟

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

با استفاده از دو هوک یوز سلکتور و یوز دیسپچ

گرفتن استیت - useSelector

import 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
  },
});

خب برای گرفتن داده باید از این هوک استفاده کنیم . استیت رو بعنوان پارامتر به ارو فانکشن میدیم و میتونیم کل متغییر هاشو بخونیم ، روش مپ بزنیم و هر کار دیگه

همونطور که میبینید برای خودندن داده نیازی به اکشن یا ریدیوسر نداریم فقط و فقط با یه هوک ساده

چجوری دیتام رو تغییر بدم؟ - useDispatch

import 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 ها که اگر موافق بودین توضیحات کامل و جامع اون رو هم براتون مینویسم

متشکرم که این متن مطلب رو دنبال کردین ، ممنون میشم هرگونه ایراداتی در متن میبینید رو به اطلاع من برسونید تا اصلاح کنم.

ارادتمند.