نحوه استفاده از Redux در React JS

مقدمه

React برای ایجاد رابط های کاربر پویا عالی است ، اما با رشد برنامه شما ، مدیریت وضعیت می تواند کثیف شود.

این جایی است که مجدداً وارد می شود. این به شما کمک می کند تا همه چیز را با تهیه یک سازماندهی کنید سیستم مدیریت دولت متمرکزبشر

اگر تا به حال خود را در حال گذر از چندین سطح (با نام “حفاری پروانه”) یا تلاش برای پیگیری تغییرات در اجزای مختلف ، Redux می تواند سردردهای زیادی را برای شما نجات دهد. اما در ابتدا ، ممکن است پیچیده به نظر برسد.

نگران نباشید – من آن را قدم به قدم می شکنم.

در پایان این راهنما ، خواهید فهمید چه Redux است ، چرا مفید است ، و چگونه می توان آن را در یک برنامه React تنظیم کردبشر

redux چیست و چرا از آن استفاده می کنید؟

redux یک است کتابخانه مدیریت دولتی این به شما کمک می کند وضعیت جهانی را در برنامه خود ذخیره و مدیریت کنید.

Redux به جای عبور از حالت به صورت دستی بین مؤلفه ها ، تمام داده های خود را در یک مکان نگه می دارد و به روزرسانی ها را قابل پیش بینی و اشکال زدایی آسان تر می کند.

چه زمانی به redux نیاز دارید؟

هر برنامه React نیاز به Redux ندارد. در اینجا برخی از نشانه ها وجود دارد که ممکن است مفید باشد:

• برنامه شما دارد منطق حالت پیچیده (به عنوان مثال ، واکشی داده ها ، احراز هویت ، مضامین UI).
• خودتان پیدا می کنید عبور از قطعات مختلف فقط برای به اشتراک گذاری داده ها.
• شما نیاز دارید یک منبع حقیقت برای داده هایی که چندین قسمت از برنامه شما به آن متکی هستند.

چگونه redux کار می کند (اصول)

Redux دارای سه بخش کلیدی است:

1. ذخیره – مکان اصلی که در آن کشور برنامه شما زندگی می کند.
2. اقدامات – رویدادهایی که تغییرات در حالت را توصیف می کنند (به عنوان مثال ، کاربر وارد می شود).
3. کاهش دهنده – کارکردهایی که دولت را بر اساس اقدامات به روز می کنند.

به آن فکر کنید مانند لیست کارهای انجام شده:

• در ذخیره لیست کارها را در خود جای داده است.
• وقتی یک کار اضافه می کنید ، شما را اعزام می کنید عملبشر
• در کاهش دهنده لیست را با کار جدید به روز می کند.

تنظیم Redux در یک برنامه React

حال ، بیایید قدم به قدم برویم تا Redux را به یک برنامه React اضافه کنیم.

مرحله 1: Redux و React-Redux را نصب کنید

این را در ترمینال خود اجرا کنید:

npm install redux react-redux @reduxjs/toolkit

ما استفاده می کنیم @reduxjs/toolkit زیرا تنظیم Redux را ساده می کند.

مرحله 2: یک فروشگاه redux ایجاد کنید

درون شما src پوشه ، یک پوشه جدید به نام ایجاد کنید reduxبشر در داخل آن ، پرونده ای به نام ایجاد کنید store.js:

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

export const store = configureStore({
  reducer: {}, // We'll add reducers here later
});

این یک فروشگاه Redux را با استفاده از آن تنظیم می کند configureStore از ابزار Redux.

مرحله 3: یک برش ایجاد کنید (کاهش دهنده + اقدامات در یک مکان)

در داخل redux پوشه ، یک پرونده دیگر ایجاد کنید ، counterSlice.js:

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

در اینجا این کار را انجام می دهد:

• یک حالت اولیه را تعریف می کند ({ value: 0 }).
• ایجاد کردن کاهش دهنده برای به روزرسانی حالت (increment وت decrement).
• صادرات اقدامات (incrementبا decrement) بنابراین مؤلفه ها می توانند از آنها استفاده کنند.

مرحله 4: کاهش دهنده را به فروشگاه اضافه کنید

باز store.js و مانند این به روز کنید:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

اکنون ، Redux از ضد ما می داند!

مرحله 5: فروشگاه را به برنامه ارائه دهید

باز index.js و برنامه را با بسته بندی کنید Provider:

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

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

این باعث می شود Redux در همه مؤلفه ها در دسترس باشد.

مرحله ششم: از حالت redux در مؤلفه ها استفاده کنید

حال ، بیایید از Redux در یک مؤلفه React استفاده کنیم. باز App.js:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./redux/counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

چگونه این کار می کند:

• useSelector مقدار پیشخوان فعلی را از فروشگاه Redux دریافت می کند.
• useDispatch به شما اجازه می دهد اقدامات را ارسال کنید (increment وت decrement).
• با کلیک بر روی یک دکمه حالت را به روز می کند بدون حفاری پروانه!

متداول

1. آیا Redux هنوز هم در سال 2025 مرتبط است؟

بله در حالی که React قلاب هایی مانند useContext وت useReducer، Redux هنوز هم برای برنامه های بزرگ با مدیریت پیچیده دولت مفید است.

2. آیا می توانم از redux با next.js استفاده کنم؟

بله ، شما می توانید! تنظیمات مشابه است ، اما ممکن است شما نیاز داشته باشید next-redux-wrapper برای رسیدگی به رندر سمت سرور.

3. آیا من همیشه به ابزار Redux نیاز دارم؟

نه ، اما توصیه می شود زیرا تنظیم Redux را ساده می کند و کد BoilerPlate را کاهش می دهد.

منابع بیشتر

پایان

Redux ممکن است در ابتدا پیچیده به نظر برسد ، اما پس از شکستن آن ، فقط یک است روش ساختاری برای مدیریت دولتبشر با استفاده از ابزار Redux ، تنظیمات بسیار ساده تر از گذشته است.

حالا که اصول را یاد گرفته اید ، دوست دارید با Redux چه نوع برنامه ای بسازید؟ 🚀