Dynamically set form field values in React + Redux - forms

Question

My app's store has a store.authState subtree. In this subtree, there are three things, an authToken, an isFetching boolean and, most importantly a fields object. My form contains two fields : username and password.
I have created an action called SET_FORM_FIELD_VALUE which should generate and update each field's state as they are changed by the user.
I would like my SET_FORM_FIELD_VALUE to update the fields object. If a user normally fills in both username and password fields, my store.authState should look like this:
{
authToken: undefined,
isFetching: false,
fields: {
username: "Brachamul",
password: "azerty123"
}
}
However, it seems that my current code actually just overwrites everything and I end up with :
{
field: {
username: "Brachamul"
}
}
The data in the field changes based on what field I last edited. It's either username or password.
Here is my code :
switch (action.type) {
case 'SET_FORM_FIELD_VALUE':
let field = {} // create a "field" object that will represent the current field
field[action.fieldName] = action.fieldValue // give it the name and value of the current field
return { ...state.fields, field }
How can I change it to fix my issue ?

Answer 1

Your return is wrong, it should be something like this
switch (action.type) {
case 'SET_FORM_FIELD_VALUE':
return {
...state,
fields: {
...state.fields,
[action.fieldName] : action.fieldValue
}
}
}
Hope it helps.

Answer 2

i used change() from 'redux-form'
which only re rendered that specific form input, and isued it pretty often.
everytime the user clicked a dropdown menu it suggested values in 2 input fields
i abstracted away the html from the anwser and some other stuff.
import { FieldArray, Field, change, reduxForm } from 'redux-form';
class WizardFormThirdPage extends react.component{
runInject(target,value){
target.value= value; // sets the client html to the value
// change (formName, Fieldname, Value) in the state
this.props.dispatch(change('spray-record', target.name, value))
}
injectFormvalues(){
var tr = div.querySelector(".applicator-equipment");
var name = div.querySelector("select").value;
if(!name.includes("Select Employee")){
// var inputs = tr.querySelectorAll("input");
var employeeDoc= findApplicatorByName(name); // synchronous call to get info
tractor = tr.querySelector("input")
sprayer = tr.querySelectorAll("input")[1];
// here i send off the change attribute
this.runInject(tractor,Number(employeeDoc.default_t))
this.runInject(sprayer,Number(employeeDoc.default_s));
}
}
// you have to connect it get the dispatch event.
export default connect(state => ({
enableReinitialize: true,
}))(reduxForm({
form: "myFormName", // <------ same form name
destroyOnUnmount: false, // <------ preserve form dataLabel
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate,
})(WizardFormThirdPage));