A practical guide to Redux Form - ERIK RASMUSSEN

A practical guide to Redux Form - ERIK RASMUSSEN

React Alicante

6 лет назад

52,717 Просмотров

Forms are hard in any framework, but they are extra complicated in React due to the recommended method of using "controlled inputs", inputs where all of their state is managed by the developer, not by the DOM or the React framework itself.

Related repo: https://github.com/erikras/reactalicante2017

Тэги:

#React.js #React_Alicante
Ссылки и html тэги не поддерживаются


Комментарии:

Dharmadurai .M
Dharmadurai .M - 09.07.2020 08:44

any one can explain me what's going on 32.40 min

Ответить
Sudhanshu Ram Tripathi
Sudhanshu Ram Tripathi - 28.08.2019 16:56

Thanks a lot for such Great explanation. :)
Would you mind to answer a question: What to choose between formik and Redux-form, as React official documentation suggest "formik".

Again => Thanks a lot.

Ответить
Abhishek Burkule
Abhishek Burkule - 23.07.2019 15:41

using ...input on my react native slow down my keystroke. When I enter any key it prints then delete and again print that letter. Its too slow while typing I have to wait for 1-2 seconds to write 2nd letter

Ответить
maddali mallap
maddali mallap - 13.06.2019 09:31

Good day sir ,
Can use the same form logic in React Native ?

Ответить
Oswee
Oswee - 14.05.2019 21:12

Isn't whole app state re-rendered on every keystroke? And seems to me that i should be named Redux-React-Form as it requires hard React dependency and cant be used in vanilla Web Components for instance.

Ответить
Memo Vara D. Gante
Memo Vara D. Gante - 21.04.2019 21:12

Amazing workshop, I'm new in React and I was trying to understand Redux Form and with this video I think that I can start to work with it!

Ответить
brt chn
brt chn - 10.04.2019 17:37

abuse that fat arrow syntax.

Ответить
r00t hkr
r00t hkr - 22.12.2018 10:54

Ironically, I am working on a personal form manager that uses decorators on components. The way I do it is like this:

import { Form, Field } from 'my-api';

@Field('myForm', 'firstName')
class Field1 extends React.Component {
render() {
const { _field, _form } = this.props;
return (
<div>...</div>
);
}
}

@Form('myForm', formConfig)
export default class MyFormComponent extends React.Component {
render() {
return (
<Field1 />
<Field2 />
);
}
}

In this example _field has all the field related data, minus the metadata, you use standard getters to see that data. The _form object contains all the functional controls to the form. The idea being that you setup a configuration for each field and the form utility manages the lifecycle of the form. Similar concept to yours (nearly identical), but I use decorators and leave a lot of the pre-fabbed stuff out for validation because the way you display validation rules is almost always unique from form to form or project to project (usually the latter).

Another nice thing about my setup that I like is that you can call the component anything you want, the only reason you need the second field in the Field decorator is to tell the manager which field in the form you are trying to call the lifecycle on.

Just my thoughts.

Ответить
Sravan kumar Ganji
Sravan kumar Ganji - 28.08.2018 15:23

how did you apply css styling to your form ?

Ответить
S John
S John - 23.07.2018 06:20

Very nice and helpful! Thanks for your time!

Ответить
Jabir Moidu
Jabir Moidu - 18.05.2018 09:51

In my organization, I am using form input components which are already developed and those are supposed to be used. Where, input value is being updated through an onChange callback function which I am passing as props in the wrapper component. For example <InputCom onChange={this.onChange()}/> . This redux form will work in this case ?

Ответить
pawel_html
pawel_html - 26.04.2018 12:03

thank you for video, do you have 'starting files' to follow along/ do on my own after watching this vid ?

Ответить
congbang pham
congbang pham - 24.03.2018 06:53

Thanks so much guy :)

Ответить
Thiago Vieira
Thiago Vieira - 05.03.2018 14:03

Fantastic Presentation. Thank you.

Ответить
Daniel Ribeiro França
Daniel Ribeiro França - 14.02.2018 21:54

Nice presentation.
But... always that im watching a use case tutorial, they use "real world application" and never matches any real world application that I worked on, hue hue.

Ответить
Skylar Saveland
Skylar Saveland - 04.02.2018 11:48

Break your lines more aggressively. Never scroll horizontally. Thanks for the sweet library!

Ответить
Klemen Strušnik
Klemen Strušnik - 28.01.2018 15:08

Excellent video! Very informative. Thank you!

Ответить
Ivan Bechev
Ivan Bechev - 23.01.2018 17:26

Very good workshop, thank you for that.
Is it possible to download the demo files from somewhere?

Ответить
MJ Kim
MJ Kim - 18.01.2018 11:30

awsome!

Ответить