React Redux how to store http response in Reducer
<p>I have a datatable with "View" Link. Upon clicking, it must fetch data from the backend. But I am having troubles storing the <code>response</code> in React-Redux style.</p>

<p>This is the snippet of the datatable:</p>

<pre><code>$("#personTable").dataTable({
  "columns" : [
     { "data" : "id", "name":"id" ,
         "render": (data, type, full,meta) =&gt; {
            return '&lt;a href="#/person/view?id='+data+'"&gt;View&lt;/a&gt;;
         }
     }
</code></pre>

<p>In my routes.jsx, I defined it to forward to PersonForm.jsx</p>

<pre><code>&lt;Route name='personForm' path='/person/view' component={PersonForm}/&gt;
</code></pre>

<p>In my PersonForm component, I have this:</p>

<pre><code>componentWillMount() {
  let personId = this.props.location.query.id
  this.props.onInit(personId)
}
</code></pre>

<p>In my PersonFormContainer.jsx:</p>

<pre><code>export const mapDispatchToProps = (dispatch) =&gt; {
  return {
    onInit: (personId) =&gt; {
      dispatch(init(personId))
    }
  }
}
</code></pre>

<p>This is my PersonActions.jsx:</p>

<pre><code>export function init(personId) {
  return function (dispatch) {

    httpService.request('/person/view/' + personId, {method: 'get'})
      .then((response) =&gt; {

        console.log(response.data) // response.data is correctly returned

        dispatch({
          type: "PERSON_INIT",
          data: response.data
        })
    }).catch(err =&gt; console.log(err))
  }
}
</code></pre>

<p>In my PersonReducer.js:</p>

<pre><code>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
  }
}
</code></pre>

<p>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:</p>

<pre><code>if (data) {
  for (let key in fields) {
    fields[key].value = data[key]
  }
}
</code></pre>

<p>This is my PersonForm component:</p>

<pre><code>render() {

  let store = this.props.person
  let fieldsMap = store.get("fields")

  &lt;ImmutableInputText label="Name" field={fieldsMap.get("name")}/&gt;
</code></pre>

<p>Note: ImmutableInputText is from our templates, something like:</p>

<pre><code>  &lt;input id={field.name} className="form-control" name={field.name}
        value={this.state.value} onBlur={this.handleBlur} onChange={changeHandler}
        disabled={disabled}/&gt;
</code></pre>