مدیریت حالت فرم در React با Redux Form

redux-form یک روش عالی برای مدیریت اشکال است که توسط Redux تهیه شده است. در واقع یک کامپوننت مرتبه بالاتر (HOC) است که از re-redux استفاده می کند تا مطمئن شود فرم های HTML در React از Redux برای ذخیره تمام وضعیت آن استفاده میکنند.
redux-form مولفه های زیر را برای کمک به شما در ساخت برنامه های تان دارد:
formReducer (): تابعی است که می گوید چگونه می توانید فروشگاه Redux را بر اساس تغییراتی که از برنامه اعمال می شود به روز کنید. این تغییرات توسط اقدامات Redux شرح داده شده است. formReducer باید روی فرم Redux نصب شود.
reduxForm (): تابع reduxForm () یک جزء مرتبه بالاتر است که یک آبجکت پیکربندی می گیرد و همیشه یک عملکرد جدید را برمی گرداند. و برای دربرگیری مؤلفه فرم و پیوند تعامل کاربر با اقدامات ارسالی Redux استفاده می شود.
مؤلفه <Field />: مؤلفه ای که در داخل مؤلفه فرم پیچیده شما قرار دارد. به عنوان روشی برای اتصال عناصر ورودی در یک فرم به redux-form logic ارائه میشود. به عبارت دیگر، این راهی است که ما می توانیم ورودی را از آنچه کاربر تایپ می کند ، دریافت کنیم.
می توانید اطلاعات بیشتر در مورد API redux-form را در مستندات آن بخوانید.
در این آموزش ، از فرم redux برای ساختن فرم با اعتبار و اتصال آن به فروشگاه Redux استفاده خواهید کرد.
پیش نیازها
برای تکمیل این آموزش به یک محیط توسعه محلی برای Node.js. نیاز دارید. نحوه نصب Node.js و ایجاد محیط توسعه محلی را در این لینک دنبال کنید.
مرحله 1 – ایجاد پروژه
ما می خواهیم با بسته create-react-app، یک برنامه React بسازیم. create-react-app به شما امکان می دهد برنامه های React را بدون پیکربندی ساخت ایجاد کنید. با اجرای دستور ترمینال زیر می توانید از برنامه create-react-app استفاده کنید. این برنامه به صورت خودکار یک برنامه React را در یک پوشه با عنوان contact-redux ایجاد می کند.
⦁ $ npx create-react-app contact-redux
⦁
توجه به این نکته مهم است که npx فقط با نسخه های npm 5.2 و بالاتر کار می کند. اگر نسخه پایین تر از آن را دارید و هنوز هم دوست دارید از create-react-app در رایانه خود استفاده کنید، دستورات ترمینال زیر را برای نصب برنامه create-react-app و شروع یک برنامه React اجرا کنید.

⦁ $ npm install -g create-react-app
⦁
⦁ $ create-react-app contact-redux
به دایرکتوری بروید و سرور مجازی توسعه را شروع کنید تا اطمینان حاصل شود که همه چیز کار می کند. برای شروع برنامه جدید ایجاد شده React در حالت توسعه ، دستور زیر را اجرا کنید:
⦁ $ npm start
⦁
موارد زیر را در مرورگر خود مشاهده خواهید کرد:

اکنون یک برنامه React فعال و در حال اجرا است.
دستور زیر را اضافه کنید تا متعلقات لازم برای فرم را اضافه کنید.
⦁ npm install –save redux react-redux redux-form
⦁
⦁ redux – یک کانتینر حالت و شرطی لازم برای کارکرد redux-form است.
⦁ React -Redux – React Redux اتصالات رسمی React برای Redux است و همچنین شرط لازم برای کارکردن redux-form
⦁ redux-form – بسته مورد استفاده برای این آموزش.
پس از نصب ، می توانید روی فرم تماس با ما کار کنید.
مرحله 2 – ایجاد فرم
ما پیوند Bulma CDN را به فایل index.html اضافه خواهیم کرد تا یک ظاهر طراحی پیش فرض اضافه شود. فایل public/index.html را باز کنید و خط کد زیر را به برچسب head اضافه کنید:
public/index.html
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css”>

اکنون می خواهیم ویرایشهایی را در فایل src / App.js انجام دهیم. فایل src / App.js را باز کنید و خط کد زیر را در قسمت بالای فایل اضافه کنید.
src/App.js
import { reduxForm, Field } from ‘redux-form’;

مؤلفه renderField آبجکت input ، یک label ، نوع ورودی و meta را که خاصیت redux-form است در اختیار شما قرار می دهد. خط {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
به این معنی است که اگر هنگام کلیک/ تمرکز روی فیلد فرم ، خطایی وجود داشته باشد ، باید پیام خطایی نشان داده شود. همچنین در صورت بروز هرگونه خطا ، فرم ارسال نمی شود.
حال اگر فرم را بررسی کردید و سعی در وارد کردن ورودی های نامعتبر دارید یا از فیلدهایی که دارای تست های اعتبار سنجی هستند ، عبور میکنید ، باید پیام های خطا را دریافت کنید.

نتیجه
در این آموزش شما یک فرم با redux-form ساخته اید و آن را به فروشگاه Redux وصل کردید. بدون نیاز به اعتبار سنجی شماتیک خارجی، اعتبارات همزمان را در فرم اضافه کردید.
می توانید اطلاعات بیشتر در مورد redux-form را در سایت رسمی مطالعه کنید و برای آگاهی بیشتر می توانید از مثال های آنها استفاده کنید.
می توانید کد کامل این آموزش را در GitHub پیدا کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade