React Redux how to store http response in Reducer - reactjs

Question

I have a datatable with "View" Link. Upon clicking, it must fetch data from the backend. But I am having troubles storing the response in React-Redux style.
This is the snippet of the datatable:
$("#personTable").dataTable({
"columns" : [
{ "data" : "id", "name":"id" ,
"render": (data, type, full,meta) => {
return 'View;
}
}
In my routes.jsx, I defined it to forward to PersonForm.jsx
<Route name='personForm' path='/person/view' component={PersonForm}/>
In my PersonForm component, I have this:
componentWillMount() {
let personId = this.props.location.query.id
this.props.onInit(personId)
}
In my PersonFormContainer.jsx:
export const mapDispatchToProps = (dispatch) => {
return {
onInit: (personId) => {
dispatch(init(personId))
}
}
}
This is my PersonActions.jsx:
export function init(personId) {
return function (dispatch) {
httpService.request('/person/view/' + personId, {method: 'get'})
.then((response) => {
console.log(response.data) // response.data is correctly returned
dispatch({
type: "PERSON_INIT",
data: response.data
})
}).catch(err => console.log(err))
}
}
In my PersonReducer.js:
var Immutable = require('immutable');
let initialState =
Immutable.fromJS({
data: {},
fields: {
name: field.create('name', [validation.REQUIRED])
}
})
export default function (state = initialState, action) {
switch(action.type) {
case PERSON_INIT:
return state.set("data", action.data)
//return state.set("fields", Immutable.fromJS(action.fields))
default:
return state
}
}
Now, the problem is back to my PersonForm.jsx. Upon calling render(), data (in my reducer) has some values, but not the fields. I am not sure how to transform the response.data (in my PersonActions) to the fields in my Reducer. Something like this:
if (data) {
for (let key in fields) {
fields[key].value = data[key]
}
}
This is my PersonForm component:
render() {
let store = this.props.person
let fieldsMap = store.get("fields")
<ImmutableInputText label="Name" field={fieldsMap.get("name")}/>
Note: ImmutableInputText is from our templates, something like:
<input id={field.name} className="form-control" name={field.name}
value={this.state.value} onBlur={this.handleBlur} onChange={changeHandler}
disabled={disabled}/>

Answer 1

I am trying to answer this without knowing the structure of the response object, So i will update this answer based on your response.
For now, let's assume this is the response you get from server
{
"code": 200,
"message": "success",
"person": {
"name": "John Doe",
"email": "john.doe#gmail.com",
"dob": "1980-01-01",
"gender": "male",
"status": "active",
}
}
In your PersonReducer.js you can do something like
export default function (state = initialState, action) {
switch(action.type) {
case PERSON_INIT:
return state.set("fields", Immutable.fromJS(action.data.person) )
default:
return state
}
}
but doing this will replace the existing fields object with the data received from server.
If you want to keep all the existing data and only update the data that has been changed or is new.., you can do something like
case PERSON_INIT:
return state.set("fields", Immutable.fromJS({ ...state.get('fields').toObject(), ...action.data.person }) )
If you only want to update the name field, you can do something like
case PERSON_INIT:
return state.setIn(['fields', 'name'], action.data.person.name );
But then you will have to do this for every field and that wont be very effective, So you can make this dynamic by doing
in PersonActions.jsx file (or wherever you want this dynamic field update functionality), you can change the dispatch code to
dispatch({
type: "PERSON_UPDATE_FIELD",
payload: { field: 'name', value: response.data.person.name }
})
Note: I used payload here instead of data, I think its best to follow redux naming conventions, but there's nothing wrong in what you're doing as long as you stick with the same conventions throughout your app.
And in your PersonReducer.js you can have something like
case PERSON_UPDATE_FIELD:
return state.setIn(['fields', action.payload.field ], action.payload.value );
Good luck.