واکنش با Redux – راهنمای قطعی.

در این پست به نحوه ادغام redux با React JS یا Next JS برای مدیریت حالت جهانی برنامه وب خود خواهیم پرداخت. همانطور که برنامه ما رشد می کند، ما می خواهیم وضعیت را در سراسر برنامه خود به اشتراک بگذاریم. برای انجام این کار، می‌توانیم از یک کتابخانه مدیریت حالت به نام redux برای مدیریت وضعیت خود در سراسر برنامه استفاده کنیم. پس بیایید در آن شیرجه بزنیم.

ابتدا بیایید یک پروژه react ایجاد کنیم.

npx create-react-app redux-tutorial
cd redux-tutorial

کتابخانه های لازم را نصب کنید.

npm i react-redux redux redux-thunk

هنگام یادگیری redux دو کار وجود دارد.

1. درک مفاهیم (به صورت نظری)
2. پیاده سازی redux در داخل برنامه ما با قلاب (در صورت استفاده از اجزای کاربردی)

حالا بیایید به جنبه های مفهومی استفاده از redux نگاهی بیندازیم. Redux دارای 4 اصطلاح مرتبط با آن است.

1. اقدامات
2. انواع
3. کاهنده ها
4. فروشگاه

فروشگاه برای ذخیره ایالت در سطح جهانی استفاده می شود.

کاهنده ها عملکردهایی هستند که به دستکاری وضعیت کمک می کنند.

کنش ها توابع کمکی هستند که با استفاده برای فراخوانی کاهنده ها برای تغییر حالت ساخته می شوند.

انواع نام هایی هستند که ما برای انجام تغییرات حالت در محیط redux داده ایم.

اکنون پوشه ها و فایل های مورد نیاز را برای ادغام redux در برنامه خود ایجاد می کنیم.

یک ساختار پوشه مانند زیر ایجاد کنید.

اکنون ما یک برنامه کوچک TODO را با redux در اینجا انجام خواهیم داد. ما می خواهیم کاهنده های خود را به عنوان todoReducer نام گذاری کنیم (شما می توانید آن را هر چیزی مانند userReducer و غیره نام گذاری کنید)

ما می خواهیم 2 نوع و 2 اکشن ایجاد کنیم. انواع خواهد بود،

1. اضافه کردن
2. حذف

و 2 اقدام به نام

1. addTodoAction
2. حذف TodoAction

(شما می توانید اکشن ها و کاهش دهنده ها را به دلخواه نام ببرید اما من از این قالب استفاده می کنم که به خوبی کار می کند.)

import { ADD_TODO, DELETE_TODO } from "../Types/TodoTypes";

export const addTodoAction = (data) => {
  return {
    type: ADD_TODO,
    data: data,
  };
};
export const deleteTodoAction = (data) => {
  return {
    type: DELETE_TODO,
    data: data,
  };
};

حالا به فایل todoReducer رفته و کد زیر را کپی کنید.

import { ADD_TODO, DELETE_TODO } from "../Types/TodoTypes";

const initialState = {
  todos: [{ name: "Redux", id: 1 }],
};

export const TodoReducers = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return { ...state, todos: [...state.todos, action.data] };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter((item) => item.id !== action.data),
      };

    default:
      return state;
  }
};

پس اینجا چه خبر است؟

ما یک عبارت switch case برای رسیدگی به 2 نوع ایجاد شده و به روز رسانی وضعیت TODOS ایجاد کرده ایم. بنابراین وقتی یک Action را با یک Type فراخوانی می کنیم، دستور switch case به صورت شرطی نوع را می بیند که می تواند ADD یا DELETE باشد و تغییرات حالت لازم را انجام می دهد.

به عنوان مثال در ADD Type، اگر نوعی به نام ADD از یک اقدام فراخوانی شود، وضعیت به روز می شود تا آن مورد todo را در لیست کارها که در اینجا یک آرایه است، اضافه کند.

اکنون این ممکن است گیج کننده به نظر برسد، اما در ابتدا به سختی می توان از redux استفاده کرد، بنابراین اجازه دهید اجرا را ببینیم.

به فایل index.js یا فایلی که ریشه برنامه شما است بروید و wrapper redux را به این صورت اضافه کنید.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'
import { store } from './Redux/Reducer';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

به این ترتیب می توانید از redux در داخل React JS، Next JS یا هر فریم ورک فرانت اند دیگری استفاده کنید و حتی می توانید از همان کد در برنامه react native خود استفاده کنید.

اکنون اجازه دهید از قلاب های سفارشی ارائه شده توسط بسته react-redux برای دریافت داده های ذخیره شده در حالت جهانی و اصلاح آن استفاده کنیم.

بنابراین در کد زیر کاری که ما انجام خواهیم داد این است که یک todo اضافه می کنیم و با فراخوانی عملی که قبلاً تنظیم کرده ایم، آن را با کمک ارسال حذف می کنیم. و سپس از useSelector برای دریافت داده ها و نشان دادن کارها به کاربر استفاده می کنیم. ما از تابع نقشه استفاده خواهیم کرد زیرا حالت todo را به عنوان یک آرایه مقداردهی اولیه کردیم. هنگامی که کاربر دکمه ارسال را فشار می‌دهد، addTodoAction را فراخوانی می‌کنیم و todo را اضافه می‌کنیم و اگر روی delete فشار داد، با فیلتر کردن آن با شناسه منحصربه‌فردی که تولید کرده‌ایم، todo را حذف می‌کنیم.

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodoAction, deleteTodoAction } from "./Redux/Actions/TodoActions";
function App() {
  const [name, setName] = useState();

  const dispatch = useDispatch();

  const todoData = useSelector((state) =>state.TodoReducers);

  return (
    <div
      style={{
        margin: 200,
      }}
    >

      <div>
        <input
          type="text"
          value={name}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>

      <button
        onClick={() => {

          const todo = { id: Math.random(), name: name };

          dispatch(addTodoAction(todo));

          setName("");
        }}
      >
        Submit
      </button>

      {todoData?.todos?.map((item, key) => {
        return (
          <div key={item?.id}>
            {key + 1} . {item?.name}{" "}
            <div
              onClick={() => {
                dispatch(deleteTodoAction(item?.id));
              }}
            >
              Delete
            </div>
          </div>
        );
      })}

    </div>
  );
}

export default App;

به این ترتیب ساختار پوشه redux خود را ایجاد می کنید و سپس کاهش دهنده ها، اقدامات، انواع خود را ایجاد می کنید و از قلاب های سفارشی برای تغییر و ذخیره داده ها در سطح جهانی استفاده می کنید.

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

بنابراین، برای دانستن مفاهیم عمیق‌تر در مورد ادغام Redux با React JS و Next JS، می‌توانید دوره من در Udemy را با لینک زیر مشاهده کنید. من می‌توانستم هر مرحله را با تجسم نحوه عملکرد کاهش‌دهنده‌ها با اقدامات برای تغییر وضعیت جهانی و اینکه چگونه می‌توانید APIهای Backend را با useEffect فراخوانی کنید و داده‌ها را در حالت جهانی ذخیره کنید، مورد بحث قرار می‌دادم. در پایان دوره شما درک کاملی در مورد نحوه استفاده از redux برای پروژه های خود خواهید داشت.

https://www.udemi.com/course/react-next-js-redux-state-management-for-absolute-beginners/?couponCode=84F8B74F45ED36FE44A1