نحوه ادغام React با Redux: آموزش گام به گام

React و Redux دو کتابخانه محبوب توسعه وب هستند. React یک کتابخانه جاوا اسکریپت برای ایجاد رابط های کاربری ساده و موثر است. Redux یک کتابخانه جاوا اسکریپت برای مدیریت وضعیت یک برنامه است. ادغام React و Redux می تواند هنگام توسعه برنامه های کاربردی در مقیاس بزرگ بسیار مفید باشد. این آموزش شما را در فرآیند ادغام React با Redux قدم به قدم راهنمایی می کند.

مرحله 1: ایجاد یک پروژه جدید.

برای شروع، باید یک پروژه React جدید ایجاد کنید. برای شروع یک پروژه جدید، از create-react-app استفاده کنید. دستور زیر را در خط فرمان خود وارد کنید.

npx create-react-app my-app

مرحله 2: Redux را نصب کنید

در مرحله بعد باید Redux را نصب کنید. دستور زیر را در خط فرمان تایپ کنید.

npm install redux react-redux

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

با استفاده از متد createStore از کتابخانه Redux، فروشگاهی ایجاد کنید که شامل وضعیت برنامه باشد. این فروشگاه کل وضعیت برنامه را نگه می دارد.

import { createStore } from 'redux';

const store = createStore(reducer);

مرحله 4: یک کاهنده ایجاد کنید

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

const initialState = {
  //initial state 
};

function reducer(state = initialState, action) {
  switch (action.type) {
    //switch cases for different actions 
    default:
      return state;
  }
}

export default reducer;

مرحله 5: اقدامات را ایجاد کنید

Actions اشیایی هستند که آنچه را که باید در برنامه اتفاق بیفتد را توصیف می کنند. یک عمل تابعی است که یک شی با ویژگی نوع و بار اختیاری ایجاد می کند.

const incrementCount = () => ({
  type: 'INCREMENT_COUNT',
  payload: 1
});

export { incrementCount }

مرحله 6: یک جزء را به فروشگاه وصل کنید

در نهایت، باید یک کامپوننت را به فروشگاه متصل کنید. از روش اتصال از کتابخانه react-redux برای اتصال یک جزء به فروشگاه استفاده کنید.

import { connect } from 'react-redux';

const Count = ({ count, incrementCount }) => {
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = {
  incrementCount: incrementCount
};

export default connect(mapStateToProps, mapDispatchToProps)(Count);

نتیجه

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