Redux برای مبتدیان – جامعه dev

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

red redux چیست؟

redux یک است ظرف حالت قابل پیش بینی برای برنامه های جاوا اسکریپت. این به شما کمک می کند تا دولت جهانی را به روشی مدیریت کنید که ردیابی و اشکال زدایی آن آسان باشد. با یکپارچه کار می کند واکنش نشان دادن، اما می توان از آن نیز در چارچوب های دیگر استفاده کرد.

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

• ✅ مدیریت دولت متمرکز: تمام حالت برنامه در یک مکان واحد (فروشگاه Redux) ذخیره می شود.
• ✅ قابلیت پیش بینی: دولت با استفاده از شیوه سخت و قابل پیش بینی تغییر می کند اقدامات وت کاهش دهندهبشر
• ✅ اشکال زدایی و devtools: redux ابزارهای اشکال زدایی قدرتمندی مانند redux devtoolsبشر
• ✅ مقیاس پذیری: به مدیریت منطق حالت پیچیده در برنامه های بزرگ کمک می کند.

🔗 مفاهیم اصلی Redux

قبل از غواصی به کد ، بیایید برخی از مفاهیم اصلی Redux را درک کنیم:

1 فروشگاه

در ذخیره مکان اصلی است که دولت برنامه شما در آن زندگی می کند.

2⃣ اقدامات

اقدامات اشیاء جاوا اسکریپت ساده هستند که توصیف می کنند چه اتفاقی افتادبشر هر عمل باید type خاصیت

const increment = { type: "INCREMENT" };
const decrement = { type: "DECREMENT" };

3⃣ کاهش دهنده

کاهش دهنده ها هستند توابع خالص این تعیین می کند که چگونه دولت در پاسخ به اقدامات تغییر می کند.

const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

4⃣ اعزام

برای به روزرسانی حالت ، شما اقدامات اعزام به فروشگاه

store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });

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

بیایید Redux را با یک برنامه React ادغام کنیم.

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

npm install redux react-redux

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

import { createStore } from "redux";
import { Provider } from "react-redux";

const store = createStore(counterReducer);

مرحله 3: Redux را به واکنش وصل کنید

از Provider مؤلفه ای که فروشگاه را در دسترس کل برنامه React خود قرار دهید.

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

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

مرحله 4: دسترسی به حالت redux در یک مؤلفه

از useSelector وت useDispatch قلاب از واکنش نشان دادن برای تعامل با فروشگاه.

import { useSelector, useDispatch } from "react-redux";

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
};

export default Counter;

thoughts افکار نهایی

Redux ابزاری قدرتمند برای مدیریت حالت است ، اما در صورت استفاده از برنامه شما بهترین استفاده است منطق حالت پیچیدهبشر اگر وضعیت برنامه شما ساده است ، ممکن است مدیریت داخلی React کافی باشد.

🚀 اکنون که اصول اولیه Redux را درک کردید ، سعی کنید آن را در پروژه React بعدی خود اجرا کنید! برنامه نویسی مبارک! 🎉