Immer: درک روشنی از نحوه مدیریت اشیاء حالت تو در تو با Immer در React و TypeScript

Summarize this content to 400 words in Persian Lang

راهنمای گام به گام استفاده از Immer در TypeScript و React

مقدمه

در توسعه مدرن React، مدیریت وضعیت غیرقابل تغییر برای رفتار قابل پیش بینی و بهینه سازی عملکرد بسیار مهم است. با این حال، اطمینان از تغییر ناپذیری می‌تواند چالش‌برانگیز باشد، به‌ویژه زمانی که با اشیاء حالت پیچیده یا عمیق تو در تو سروکار داریم. اینجاست که همیشه Immer به شما اجازه می دهد تا با استفاده از مفهومی به نام “وضعیت پیش نویس” با حالت تغییرناپذیر به روشی راحت تر و خوانا کار کنید.

در این پست وبلاگ، نحوه ادغام Immer در پروژه React با استفاده از TypeScript را توضیح خواهیم داد. ما اصول اولیه Immer، راه اندازی یک پروژه React را با TypeScript و استفاده از Immer برای مدیریت تغییرناپذیر حالت، از جمله مدیریت اشیاء حالت عمیق تو در تو را پوشش خواهیم داد.

پیش نیازها

دانش اولیه React و TypeScript.
Node.js و npm/yarn روی دستگاه شما نصب شده است.

مرحله 1: راه اندازی پروژه React

ابتدا اجازه دهید یک پروژه React جدید با TypeScript راه اندازی کنیم.

npx create-react-app my-immer-app –template typescript
cd my-immer-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از راه اندازی پروژه، می توانید سرور توسعه را راه اندازی کنید تا مطمئن شوید همه چیز به درستی کار می کند.

npm start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این باید سرور توسعه را روشن کند http://localhost:3000.

مرحله 2: نصب Immer

Immer به طور پیش فرض در پروژه های React گنجانده نشده است، بنابراین باید آن را نصب کنید:

npm install immer

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از نصب Immer، آماده شروع استفاده از آن در پروژه خود هستید.

مرحله 3: درک اصول اولیه Immer

Immer با استفاده از مفهوم “وضعیت پیش نویس” به روز رسانی های تغییرناپذیر را ساده می کند. به جای اینکه مستقیماً حالت را تغییر دهید، وضعیت پیش نویس را تغییر می دهید. پس از انجام تغییرات، Immer بر اساس تغییرات ایجاد شده در پیش نویس، حالت تغییرناپذیر بعدی را ایجاد می کند.

در اینجا یک مثال اساسی آورده شده است:

import produce from ‘immer’;

const state = {
name: ‘Alice’,
age: 25,
};

const nextState = produce(state, (draft) => {
draft.age = 26;
});

console.log(state); // { name: ‘Alice’, age: 25 }
console.log(nextState); // { name: ‘Alice’, age: 26 }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، اصل state بدون تغییر باقی می ماند، در حالی که nextState منعکس کننده تغییرات ایجاد شده در طول produce تابع

مرحله 4: استفاده از Immer در یک React Component

حالا بیایید Immer را در یک جزء React ادغام کنیم. ما یک جزء شمارنده ساده ایجاد می کنیم که از Immer برای مدیریت تغییرناپذیر حالت استفاده می کند.

import React, { useState } from ‘react’;
import produce from ‘immer’;

const Counter: React.FC = () => {
const [state, setState] = useState({ count: 0 });

const increment = () => {
setState((currentState) =>
produce(currentState, (draft) => {
draft.count += 1;
})
);
};

return (
div>
p>Count: {state.count}/p>
button onClick={increment}>Increment/button>
/div>
);
};

export default Counter;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این جزء:

حالت را با مقداردهی اولیه می کنیم useState.
این increment تابع را به روز می کند count با استفاده از Immer's produce تابع
این setState تابع با وضعیت به روز شده فراخوانی می شود و اطمینان حاصل می شود که وضعیت تغییرناپذیر باقی می ماند.

مرحله 5: مدیریت Nested State

Immer به ویژه هنگام برخورد با اشیاء حالت عمیق تو در تو مفید است. ساختار ایالتی مانند این را در نظر بگیرید:

interface Address {
city: string;
zip: string;
}

interface UserProfile {
name: string;
age: number;
address: Address;
}

const initialState: UserProfile = {
name: ‘Alice’,
age: 25,
address: {
city: ‘New York’,
zip: ‘10001’,
},
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر می خواهید به روز رسانی کنید zip کد در address شی، Immer آن را آسان می کند:

import React, { useState } from ‘react’;
import produce from ‘immer’;

const UserProfileComponent: React.FC = () => {
const [state, setState] = useState(initialState);

const updateZip = (newZip: string) => {
setState((currentState) =>
produce(currentState, (draft) => {
draft.address.zip = newZip;
})
);
};

return (
div>
p>Name: {state.name}/p>
p>Age: {state.age}/p>
p>City: {state.address.city}/p>
p>Zip: {state.address.zip}/p>
button onClick={() => updateZip(‘10002’)}>Update Zip/button>
/div>
);
};

export default UserProfileComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا:

استفاده می کنیم produce برای به روز رسانی تو در تو address.zip دارایی
حالت اولیه دست نخورده باقی می ماند و یک شیء حالت جدید با مقادیر به روز شده ایجاد می شود.

مرحله 6: مثال حالت تودرتو پیچیده تر

بیایید یک مثال پیچیده تر را بررسی کنیم که در آن شما باید چندین ویژگی تودرتو را به روز کنید. جزئیات بیشتری را در نظر بگیرید UserProfile:

interface Contact {
email: string;
phone: string;
}

interface Address {
city: string;
zip: string;
}

interface UserProfile {
name: string;
age: number;
address: Address;
contact: Contact;
}

const initialState: UserProfile = {
name: ‘Alice’,
age: 25,
address: {
city: ‘New York’,
zip: ‘10001’,
},
contact: {
email: ‘alice@example.com’,
phone: ‘123-456-7890’,
},
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فرض کنید می خواهید هر دو را به روز کنید city و phone در یک عملیات:

import React, { useState } from ‘react’;
import produce from ‘immer’;

const UserProfileComponent: React.FC = () => {
const [state, setState] = useState(initialState);

const updateUserInfo = (newCity: string, newPhone: string) => {
setState((currentState) =>
produce(currentState, (draft) => {
draft.address.city = newCity;
draft.contact.phone = newPhone;
})
);
};

return (
div>
p>Name: {state.name}/p>
p>Age: {state.age}/p>
p>City: {state.address.city}/p>
p>Zip: {state.address.zip}/p>
p>Email: {state.contact.email}/p>
p>Phone: {state.contact.phone}/p>
button onClick={() => updateUserInfo(‘Los Angeles’, ‘987-654-3210’)}>
Update City and Phone
/button>
/div>
);
};

export default UserProfileComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال:

ما به روز رسانی می کنیم city در address و phone در contact اشیاء به طور همزمان
Immer این به‌روزرسانی‌های تودرتو پیچیده را به آرامی مدیریت می‌کند و تضمین می‌کند که وضعیت تغییرناپذیر باقی می‌ماند.

مرحله 7: نتیجه گیری

Immer ابزار قدرتمندی است که کار با حالت تغییرناپذیر را در برنامه‌های React به خصوص در هنگام استفاده از TypeScript ساده می‌کند. این روشی خواناتر و کم خطاتر برای مدیریت به‌روزرسانی‌های حالت ارائه می‌کند و کد شما را پاک‌تر و نگهداری آسان‌تر می‌کند.

با ادغام Immer در پروژه های React خود، می توانید اطمینان حاصل کنید که مدیریت حالت شما قابل پیش بینی و قوی باقی می ماند، حتی با افزایش پیچیدگی برنامه شما.

این راهنما به شما نشان داده است که چگونه به‌روزرسانی‌های حالت ساده و پیچیده، از جمله اشیاء حالت عمیق تو در تو را مدیریت کنید. Immer به حفظ تغییر ناپذیری به روشی ساده کمک می کند، که برای ساخت برنامه های React قابل اعتماد و قابل نگهداری ضروری است.

منابع اضافی

امیدوارم این راهنما به شما پایه ای قوی برای استفاده از Immer با React و TypeScript در پروژه های خود بدهد. کد نویسی مبارک!

این نسخه از وبلاگ باید درک روشنی از نحوه مدیریت اشیاء حالت تودرتو با Immer در React و TypeScript به شما بدهد.

npx create-react-app my-immer-app --template typescript
cd my-immer-app

npm start

npm install immer

import produce from 'immer';

const state = {
  name: 'Alice',
  age: 25,
};

const nextState = produce(state, (draft) => {
  draft.age = 26;
});

console.log(state); // { name: 'Alice', age: 25 }
console.log(nextState); // { name: 'Alice', age: 26 }

import React, { useState } from 'react';
import produce from 'immer';

const Counter: React.FC = () => {
  const [state, setState] = useState({ count: 0 });

  const increment = () => {
    setState((currentState) =>
      produce(currentState, (draft) => {
        draft.count += 1;
      })
    );
  };

  return (
    div>
      p>Count: {state.count}/p>
      button onClick={increment}>Increment/button>
    /div>
  );
};

export default Counter;

interface Address {
  city: string;
  zip: string;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
}

const initialState: UserProfile = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'New York',
    zip: '10001',
  },
};

import React, { useState } from 'react';
import produce from 'immer';

const UserProfileComponent: React.FC = () => {
  const [state, setState] = useState(initialState);

  const updateZip = (newZip: string) => {
    setState((currentState) =>
      produce(currentState, (draft) => {
        draft.address.zip = newZip;
      })
    );
  };

  return (
    div>
      p>Name: {state.name}/p>
      p>Age: {state.age}/p>
      p>City: {state.address.city}/p>
      p>Zip: {state.address.zip}/p>
      button onClick={() => updateZip('10002')}>Update Zip/button>
    /div>
  );
};

export default UserProfileComponent;

interface Contact {
  email: string;
  phone: string;
}

interface Address {
  city: string;
  zip: string;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
  contact: Contact;
}

const initialState: UserProfile = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'New York',
    zip: '10001',
  },
  contact: {
    email: 'alice@example.com',
    phone: '123-456-7890',
  },
};

import React, { useState } from 'react';
import produce from 'immer';

const UserProfileComponent: React.FC = () => {
  const [state, setState] = useState(initialState);

  const updateUserInfo = (newCity: string, newPhone: string) => {
    setState((currentState) =>
      produce(currentState, (draft) => {
        draft.address.city = newCity;
        draft.contact.phone = newPhone;
      })
    );
  };

  return (
    div>
      p>Name: {state.name}/p>
      p>Age: {state.age}/p>
      p>City: {state.address.city}/p>
      p>Zip: {state.address.zip}/p>
      p>Email: {state.contact.email}/p>
      p>Phone: {state.contact.phone}/p>
      button onClick={() => updateUserInfo('Los Angeles', '987-654-3210')}>
        Update City and Phone
      /button>
    /div>
  );
};

export default UserProfileComponent;