Redux Form - sync form with Create Operation - reactjs

Question

technologies: using react, Redux, Redux Form (FieldsArray), MongoDB.
I have a list of entities and I want to do the following:
I want to create an entity -> get back from server an entity with _id --> update store with then entity and the _id.
How do I do that?
actions.js
export function createEntity(entity) {
return function (dispatch) {
dispatch(createEntityStart());
return axios.post(
'http://localhost:3000/api/users',
entity,
)
.then(function (response) {
dispatch(createEntitySuccess(response.entityWithId));
}).catch(function (response) {
dispatch(createEntityError(response.data));
});
};
}
I have done the fields.push({}) - Got a new entity in the component.
Now I would like to post the new entity which follow a returned entity (with id).
I now need to save the entity with Id somewhere in the store.
How it should be done?
I got in the store:
form
MyFormName
values
initial
registeredFields

Answer 1

If you are looking to store it in redux-form's state, there are a couple options available. You can look at using redux-form's Action Creators to manipulate its state. Or you can add a plugin into its form reducer (this is a super simplified example):
const reducers = {
form: formReducer.plugin({
entityForm: (state, action) => {
switch(action.type) {
case CREATE_ENTITY:
return {
...state,
values: {
action.payload
},
registeredFields: {
...state.registeredFields,
}
}
default:
return state
}
}
})
}
You can find more details about redux-form plugins at http://redux-form.com/7.0.3/docs/api/ReducerPlugin.md/
Another option, if you don't want to save it in redux-form's state, is to just create your own state object within redux that stores the entity information.