DrivingInsanee February 2016

pass form data react redux fast

Right now, I am finding my work process with react and redux painfully slow, namely because of this:

//Form
changeInput(event){
this.props.changeInput(event.target.value)
}
render(){
<form
<input onChange={this.changeInput}
</form

//ActionCreator
export function changeInput(value)
return {type: 'CHANGE_INPUT', value}

//Reducer
switch(action.type)
case: 'CHANGE_INPUT'
changeInput(state, action.value

yadda yadaa yadaa. And then do roughly the exact same sequence of calls for submitting the form.

I would like to cut out the middle man. I don't want to have to record input changes and then pass those changes to the state, because it's so much work.

Because before redux, I just did this. form.serialize(); Boom, I have all the form data.

So, what's the way to do this with react? Should I just use jQuery? No one seems to use jQuery with react, but I can't help but think using jQuery would make things 100x easier.

Answers


mike james February 2016

I suggest trying redux-form.

It really helped me to reduce boilerplate.

It's pretty hackable and keeps to redux practises.

And if you're reaching for jquery you're missing something. Go back and read up, and ask questions like this!


DrivingInsanee February 2016

I properly was not very clear in my question, but I realized that if I use:

npm: form-data

and I simply pass the form element to new FormData(formElement), it does the exact same thing as jquery.serialize()

This will definitely help speed up development for me.


David Khourshid February 2016

I recommend checking out react-redux-form - since you already have Redux set up, this is all you need:

import { Field } from 'react-redux-form';

// inside your connected component's render() method:
<Field model="user.name">
  <input type="text" />
</Field>

Post Status

Asked in February 2016
Viewed 2,675 times
Voted 7
Answered 3 times

Search




Leave an answer