Erik Rasmussen | Abstracting Form State with Redux Form

[@fredericgauld5319]

WOW! Thanks Erik. This is one of the most well worked react-redux projects I've come across. I'll be using it for my startup. SuperThanks from Montreal, Québec, Canada!

[@Mike.e]

Great talk. Thank you! I also enjoyed your quick but great overview of React/Redux.

[@sabhab1]

Great talk covering the important use case w.r.t Forms , Thanks a lot Erik. . 49:57 is Awesome . .

[@thecondor5488]

Yes it is!! So maybe I missed something, but what tool is showing the playback widget?

[@erikras]

Redux DevTools Chrome extension.

[@Robsonbcarvalho]

I was in doubt what form lib to choose, but your great presentation gave me the answer, Redux Form is the way to follow. You have done an excellent job @Erik Rasmussen.

[@mjwrather]

I'm only 30 seconds in, but that intro was so epic I need to take a break and maybe even a nap

[@halvedbagel5827]

Great talk. Watching it for the second time

[@moveaxebx]

Very nice job Erik. Much better job than the API Redux-Form had had before. Now make sure you guys maintain that good since I'm pushing this into production in couple of months. :)

[@fidabhittani]

Very Impressed. Very nice abstraction of the form state.

[@pedromagnus]

Description should have github link. Could you add it? Thanks.

[@HekaFOF]

This redux form version 6 looks way better than the old ones :)

[@mobiledevtube]

Muchas gracias Erik, we are going to try out v6 for sure. Was on our way of coding our own setup, this saves us ton of hours :) We have a huge forms stack to rewrite ... so really hope this does the magic.

[@kuchumovn]

Now I know how erikras looks

[@DevanHuapaya]

I thought the same thing

[@rdxtn]

he is so hot.

[@pashabiceps95]

lol

[@andreivedovato]

this is absolutely awesome

[@earth-to-brian]

@17:45 If I remember correctly, from reading the Redux docs, reducers *should* not mutate state since they should remain pure functions. But i'm not exactly sure what "mutated functionally" means.

[@wellyngtonamaral4097]

Reducers should not change the redux state. Mutate means generate a new object with the new state. You're not changing the state. You are just creating a new one. Pure functions are functions that receives an argument and returns a value with no side effect (no async calls or any other thirty part libraries call that could compromise the purity if thats a real word in english xD). So reducer still valid as a pure function.

[@thomasfuchsberger3912]

Thanx Eric for this awesome thing!!!

[@sundarammms327]

I liked Redux-Form and the way you present it too.. :).

[@wellyngtonamaral4097]

Congratulations and thanks for the excellent job with this library. However you look very different compared to your profile picture. Didn't thought was you talking on the video in the first time.

[@__greg__]

great talk!

[@andresgutgon]

Awesome talk! thanks

[@itepsilon]

Great Talk !

[@jeromelanteri321]

Does the Redux logic source code is as the speach construction style ? "... AND..... AND.... AND.....AND.....AND......" (it is a joke, but consider there is other link-words than only "and", the same in source code).

[@lokeshagrawal8240]

Awesome thing out

[@FrancoRissoDev]

Amazing talk! :D

[@kevgi]

just Awesome!!!

[@RonaldFelix]

40:50 FieldArray example

[@TheShneek]

This is great!

[@JoseAyerdis]

What is the name of that devtools that he uses for seeing the diff/state ?

[@CharlesRochaDantas]

Redux DevTools Chrome extension.

[@ChrisGeirman]

I really dislike it when the contrived example someone uses to justify their solution is the worst possible case. If you're solving an actual problem, you don't need to make things seem worse than they really are. At 12:07m, he describes the "Simplest React Form" with an event handler for every single form field (handleUsernameChange, handlePasswordChange, etc), each with it's own setState call. This is not realistic and unnecessarily complex. Each of those functions could be consolidated into a single handleChange function like so (I hope KZbin will format this decent enough)... ``` handleChange = (event) => { const { name, value } = event.target; this.setState({ values: { ...this.state.values, [name]: value } }); } ```

[@juanjegarcia3957]

that's actually the right way to handle forms with setState.

[@ChrisGeirman]

Juan Je García setting up a separate handler for each field is best practice in your opinion?

[@juanjegarcia3957]

He says why in the video. The React documentation says the same: facebook.github.io/react/docs/forms.html#controlled-components

[@ChrisGeirman]

He describes what a controlled component is, which requires an onChange handler. The react documentation re enforces this, sure. But he says "This is the simplest possible react form I could come up with" with username and password, then he creates one handler for each field (handleUsernameChange and handlePasswordChange), which certainly isn't the simplest it could be. it's possible to have just one change handler (handleChange) as shown in the react docs. The react case is too simple to show this case unfortunately.

[@juanjegarcia3957]

Chris Geirman That produces less lines of code, but it isn't necessarily simpler and/or cleaner.

[@MarcinAntczak1]

Didn't you have money to purchase intro track from Audiojungle ???

[@komaldeepsinghchahal1286]

cool stuff man..

[@SankarP]

I liked the first part of your talk. The demo was a little too fast to follow for my liking.

[@ViktorAks]

Use pause in your video player :-)

[@SankarP]

It is not about the fps of the video but the extent of coverage. Too much of content was crammed in too short a time imho.

[@erikras]

Thanks for the feedback!

[@publishyours]

To me it was great. A single hour and I feel like I can implement a solid form with custom fields, validation and all on a React/Redux project I'm currently working on. I couldn't have asked for more! =]

[@jhwheeler7]

Yeah I'm with Rafael on this one. Definitely better to have more info than too little.

[@martindong5957]

Do not use this , it will lag when you type faster due to unecessary tries to rerender everything in form

[@danschuman77]

I always imagined Erik had a Spanish accent! (Hey Erik.. it's quicksnap =P )

[@erikras]

Ha! I have a US accent in Spanish. :-)

[@antonio-vangi]

Hallo, You could explain how I can integrate the project into a Django application? Thanks

[@fuu812]

Awesome library, awesome presentation. Here the links folks: - github.com/erikras/redux-form - codesandbox.io/s/mzrjw05yp