مدیریت حالت فرم در 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’;

سپس ، به تابع render () بروید و با کد زیر آن را اصلاح کنید:
src/App.js
render() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Welcome to React x redux-form</h1>
</header>
<div className=”container”>
<p className=”App-intro”>
Contact Form
</p>
<SignInForm />
</div>
</div>
);
}
متن مقدمه تغییر کرده است و از همه مهمتر یک مؤلفه <SignInForm /> را که در زیر ایجاد خواهیم کرد اضافه کردیم. این یک مؤلفه ساده خواهد بود که فرم مورد نیاز ما را برمی گرداند و آن را به مؤلفه redux-form وصل می کند. در همان فایل src / App.js ، قبل از اعلام class App extends Component ، این کد را در زیر تایپ کنید.
src/App.js
let SignInForm = props => {
return <form className=”form”>
<div className=”field”>
<div className=”control”>
<label className=”label”>First Name</label>
<Field className=”input” name=”firstName” component=”input” type=”text” placeholder=”First Name”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Email</label>
<Field className=”input” name=”email” component=”input” type=”email” placeholder=”Email Address”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Proficiency</label>
<div className=”select”>
<Field className=”input” name=”proficiency” component=”select”>
<option />
<option value=”beginner”>Beginner Dev</option>
<option value=”intermediate”>Intermediate Dev</option>
<option value=”expert”>Expert Dev</option>
</Field>
</div>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”checkbox”>
<Field name=”saveDetails” id=”saveDetails” component=”input” type=”checkbox”/>
Save Details
</label>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Message</label>
<Field className=”textarea” name=”message” component=”textarea” />
</div>
</div>

<div className=”field”>
<div className=”control”>
<button className=”button is-link”>Submit</button>
</div>
</div>

</form>;
};
در این کد فرم تماس با ما به صورت جزیی تنظیم می شود که از کاربر می خواهد اطلاعاتی مانند نام ، نام خانوادگی و سن را میخواهد. نکته جالب در این فرم مولفه Field است.
مولفه Field از بسته فرم redux تهیه می شود و نحوه نوشتن فیلد input است. مشخصه type تعیین می کند چه نوع ورودی باید باشد ، یعنی ورودی radio ، ورودی checkbox ، ورودی text یا ورودی email . مشخصه component تعیین می کند که چه نوع فیلد ورودی باید باشد ، می تواند برچسبهای input ، textarea یا select باشد و ویژگی prop همان چیزی است که برای شناسایی وضعیت فیلدهای فروشگاه redux که در زیر ایجاد خواهیم کرد ، استفاده خواهد شد.
بنابراین برای استفاده از فرم متصل به فرم redux ، باید یک نوع فروشگاه Redux ایجاد کنیم و این کاری است که در آینده انجام خواهیم داد.
مرحله 3 – راه اندازی فروشگاه Redux
ما به یک فروشگاه Redux احتیاج داریم که بتوانیم مؤلفه فرم (SignInForm) را که ایجاد کردیم به هم وصل کنیم. بیایید با وارد کردن بسته redux شروع کنیم. فایل src / index.js را باز کنید و خطوط کد زیر را اضافه کنید که در آن اساساً redux را وارد برنامه React میکنیم.
src/index.js
import { createStore, combineReducers } from ‘redux’;
import { Provider } from ‘react-redux’;
import { reducer as formReducer } from ‘redux-form’;

اولین خط کد createStore و combineReducers را وارد میکند. createStore کمک می کند تا یک فروشگاه Redux ایجاد کنید که وضعیت کامل برنامه شما را نگه میدارد و combineReducers به شما کمک می کند تا کلیه توابع کاهشی خود را در یک تابع کمکی منفرد مدیریت کنید که می تواند پس از آن به CreateStore منتقل شود. می توانید اطلاعات بیشتر در مورد این عملکردها را در صفحه مرجع Redux API مطالعه کنید.
خط دوم کد Provider را از react-redux تأمین می کند. Provider کمک می کند تا وضعیت فروشگاه به کلیه اجزای کانتینر موجود در برنامه منتقل شود و در ادامه نشان خواهیم داد که چگونه کار می کند.
خط سوم کد reducer به عنوان formReducer وارد میکند و این چیزی است که ما می خواهیم از آن استفاده کنیم تا فرم خود را به فروشگاه Redux وصل کنیم.
در مرحله بعد ، ما فروشگاه واقعی Redux را ایجاد می کنیم و با استفاده از مؤلفه Provider ، اطمینان حاصل می کنیم که برای همه اجزای کانتینر کاربرد دارد. فایل src / index.js را با بلوک کد زیر ویرایش کنید.
src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

import { createStore, combineReducers } from ‘redux’;
import { Provider } from ‘react-redux’;
import { reducer as formReducer } from ‘redux-form’;

import ‘./index.css’;
import App from ‘./App’;
import registerServiceWorker from ‘./registerServiceWorker’;

const rootReducer = combineReducers({
form: formReducer,
});

const store = createStore(rootReducer);

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

registerServiceWorker();

در بلوک کد بالا ، ما از تابع CombineReducers استفاده می کنیم تا formReducer را از فرم به فروشگاه Redux وصل کنیم. در اصل برای به روزرسانی هر یک از حالت های ما در پاسخ به اقدامات ، که در این حالت ، تغییر فرم هستند ، مورد استفاده قرار می گیرد. خط بعدی کد برای ایجاد فروشگاه با استفاده از CreatStore از Redux استفاده می شود.
سپس این فروشگاه تازه ایجاد شده به کمک Provider که در قسمت کامپوننت برنامه است، در دسترس همه قسمتهای برنامه قرار میگیرد و همچنین خصیصه ای را قبول می کند که همانstore است که در بالا ایجاد شد.
بیایید به فرم برگردیم و در آخر آن را به فروشگاه وصل کنیم.
مرحله 4 – اتصال فرم به redux-form
ما مؤلفه فرم خود را داریم اما هنوز به فرم redux وصل نشده است. بیایید آن را تنظیم کنیم. این بلوک کد را درست زیر class App extends Component و بلافاصله پس از اعلان مؤلفه ارائه دهنده SignInForm ، تایپ کنید.
src/index.js
SignInForm = reduxForm({
form: ‘signIn’,
})(SignInForm);

در بلوک کد بالا ، SignInForm با استفاده از کامپوننت مرتبه بالاتر reduxForm به فرم متصل به redux تبدیل می شود. این بدان معنی است که فرم ما اکنون به فروشگاه قلاب شده است.
نکته مهم این است که فرم کلید پیکربندی ، به عنوان شناسه استفاده می شود و از آن برای تهیه نامی منحصر به فرد برای مؤلفه فرم گردد. اگر چند فرم وجود داشته باشد ، برای مدیریت بهتر حالتهای مختلف ، باید از اسامی جداگانه استفاده کنید.
نکته بعدی که باید انجام دهیم پیکربندی مواردی است که هنگام کلیک بر روی دکمه اتفاق می افتد. در یک برنامه ایده آل ، شما می خواهید داده ها را به یک API راه دور یا برخی از پایگاه های داده ارسال کنید اما به خاطر اهداف نمایشی ، ما داده های فرم را در کنسول مرورگر وارد خواهیم کرد. برای انجام این کار ، باید داده های فرم را از مشخصه ها بگیریم و آنها را در جایی ذخیره کنیم.
در داخل مولفه SignInForm ، خط کد زیر را درست بالای عبارت return اضافه کنید.
src/index.js
const { handleSubmit } = props;
return <form **onSubmit={handleSubmit}** className=”form”>

props موجود در فرم SignInForm به دسته handleSubmit تجزیه می شوند. در هنگام کلیک بر روی دکمه ارسال ، از تابع handSubmit در فرم به عنوان کنترل کننده رویداد onSubmit استفاده می شود.

سرانجام ، در داخل مولفه app در فایل src / App.js ، تابعی را ایجاد می کنیم که داده های فرم را به کنسول مرورگر وارد می کند. درست قبل از تابع render() ، بلوک کد زیر را به فایل اضافه کنید.
src/App.js
handleSignIn = values => {
console.log(values);
};
سپس تابع handSignIn را به عنوان کنترل کننده رویداد برای مؤلفه SignInForm اضافه کنید. redux-form به طور خودکار مشخص می کند که داده های بدست آمده از فرم ، که اساساً مؤلفه SignInForm است باید به لطف توابع handleSubmit فوق در کنسول وارد شوند.
src/App.js
<SignInForm onSubmit={this.handleSignIn} />

اکنون می توانید برنامه را با اجرای دستور پایانه npm start شروع کنید. فرم را پر کنید ، روی ارسال کلیک کنید و مقادیر وارد شده به کنسول را مشاهده خواهید کرد.

مرحله 5 – افزودن اعتبارات
وقتی صحبت از فرم های ساخت و ارسال redux-form با برخی از ویژگی های اعتبار سنجی به میان می آید، افزودن اعتبارات مهم است و اکنون قصد داریم آن را اجرا کنیم. در فایل src / App.js ، بلوک کد زیر را تایپ کنید.
src/App.js
const validate = val => {
const errors = {};
if (!val.firstName) {
console.log(‘First Name is required’);
errors.firstName = ‘Required’;
}
if (!val.lastName) {
console.log(‘Last Name is required’);
errors.lastName = ‘Required’;
}
if (!val.email) {
console.log(’email is required’);
errors.email = ‘Required’;
} else if (!/^.+@.+$/i.test(val.email)) {
console.log(’email is invalid’);
errors.email = ‘Invalid email address’;
}
if (!val.age) {
errors.age = ‘Required’
} else if (isNaN(Number(val.age))) {
errors.age = ‘Must be a number’
} else if (Number(val.age) < 18) {
errors.age = ‘Sorry, you must be at least 18 years old’
}
return errors;
};
تابع validate برای بررسی خطاهای اعتبار سنجی در فرم استفاده می شود. از پارامتر Val برای بررسی اعتبار سنجی فیلدهای مختلف استفاده می شود. ابتدا بررسی می کنیم که آیا آبجکت errors خالی است ، بدیهی است که آبجکت خالی به این معنی است که خطایی وجود ندارد. سپس از منطق شرطی استفاده می کنیم تا بررسی کنیم که آیا یک فیلد خالی است یا خیر ، اگر هست شما خطای مربوطه را وارد می کنید. در بلوک کد بالا ، ما فقط اعتبار سنجی برای نام ، نام خانوادگی ، ایمیل و سن را انجام می دهیم.
در شرط اعتبار سنجی ایمیل ، بررسی می کنیم که آیا خالی است یا خیر و همچنین اینکه آیا یک ایمیل معتبر با استفاده از regex استفاده کرده است و در اعتبارسنجی مشروط سن ، بررسی می کنیم که خالی است ، یا یک عدد است و آیا کاربر کمتر از 18 سال است.
در مرحله بعدی ، عملکرد اعتبارسنجی خود را به صورت redux ثبت خواهیم کرد تا بتواند از آن استفاده کند و آزمایش های اعتبار سنجی را انجام دهد. تابع validate را به مؤلفه مرتبه بالاتر redux-form اضافه کنید:
src/index.js
SignInForm = reduxForm({
form: ‘signIn’,
validate,
})(SignInForm);

اکنون که عملکرد اعتبارسنجی خود را آماده کرده ایم و در فرم Hux-redux ثبت شده است ، یک مؤلفه قابل استفاده مجدد ایجاد کنید که خطاها را در هر زمان وقوع، نشان دهد و از آن مؤلفه جدید ایجاد شده در فرم های ما استفاده کند.
src/index.js
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
<div className=”control”>
<label className=”field”>{label}</label>
<input className=”input” {…input} placeholder={label} type={type}/>
{touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
</div>
</div>
)

مؤلفه 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