Reactjs React Redux如何在Reducer中存储http响应

我有一个带有“视图”链接的数据表。单击后，它必须从后端获取数据。但是我在以React-Redux样式存储

响应时遇到问题

这是datatable的片段：

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

在my PersonFormContainer.jsx中：

export const mapDispatchToProps = (dispatch) => {
  return {
    onInit: (personId) => {
      dispatch(init(personId))
    }
  }
}

这是我的Personations.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))
  }
}

在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
  }
}

现在，问题又回到了我的PersonForm.jsx。调用render（）时，数据（在我的reducer中）有一些值，但没有字段。我不知道如何将response.data（在我的PersonActions中）转换为我的Reducer中的字段。大概是这样的：

if (data) {
  for (let key in fields) {
    fields[key].value = data[key]
  }
}

这是我的PersonForm组件：

render() {

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

  <ImmutableInputText label="Name" field={fieldsMap.get("name")}/>

render（）{
let store=this.props.person
让fieldsMap=store.get（“字段”）

注意：ImmutableInputText来自我们的模板，类似于：

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

我试图在不知道响应对象结构的情况下回答此问题，因此我将根据您的响应更新此答案

现在，让我们假设这是您从服务器得到的响应

{
  "code": 200,
  "message": "success",
  "person": {
    "name": "John Doe",
    "email": "john.doe@gmail.com",
    "dob": "1980-01-01",
    "gender": "male",
    "status": "active",
  }
}

在
PersonReducer.js
中，您可以执行以下操作

export default function (state = initialState, action) {
  switch(action.type) {

    case PERSON_INIT:
      return state.set("fields", Immutable.fromJS(action.data.person) )

    default:
      return state

  }
}

case PERSON_INIT:
  return state.set("fields", Immutable.fromJS({ ...state.get('fields').toObject(), ...action.data.person }) )

case PERSON_INIT:
    return state.setIn(['fields', 'name'], action.data.person.name );

case PERSON_UPDATE_FIELD:
    return state.setIn(['fields', action.payload.field ], action.payload.value );

但这样做将用从服务器接收的数据替换现有的
字段
对象

如果要保留所有现有数据，只更新已更改或新的数据，可以执行以下操作

export default function (state = initialState, action) {
  switch(action.type) {

    case PERSON_INIT:
      return state.set("fields", Immutable.fromJS(action.data.person) )

    default:
      return state

  }
}

case PERSON_INIT:
  return state.set("fields", Immutable.fromJS({ ...state.get('fields').toObject(), ...action.data.person }) )

case PERSON_INIT:
    return state.setIn(['fields', 'name'], action.data.person.name );

case PERSON_UPDATE_FIELD:
    return state.setIn(['fields', action.payload.field ], action.payload.value );

如果只想更新名称字段，可以执行以下操作

export default function (state = initialState, action) {
  switch(action.type) {

    case PERSON_INIT:
      return state.set("fields", Immutable.fromJS(action.data.person) )

    default:
      return state

  }
}

case PERSON_INIT:
  return state.set("fields", Immutable.fromJS({ ...state.get('fields').toObject(), ...action.data.person }) )

case PERSON_INIT:
    return state.setIn(['fields', 'name'], action.data.person.name );

case PERSON_UPDATE_FIELD:
    return state.setIn(['fields', action.payload.field ], action.payload.value );

但是你必须在每个领域都这样做，这不是很有效，所以你可以通过这样做来让它充满活力

在
PersonActions.jsx
文件中（或任何需要此动态字段更新功能的地方），您可以将调度代码更改为

dispatch({
  type: "PERSON_UPDATE_FIELD",
  payload: { field: 'name', value: response.data.person.name }
})

注意：我在这里使用了
有效载荷
而不是
数据
，我认为最好遵循redux命名约定，但只要你在整个应用程序中坚持相同的约定，你所做的一切都没有错

在你的
PersonReducer.js
中，你可以有

export default function (state = initialState, action) {
  switch(action.type) {

    case PERSON_INIT:
      return state.set("fields", Immutable.fromJS(action.data.person) )

    default:
      return state

  }
}

case PERSON_INIT:
  return state.set("fields", Immutable.fromJS({ ...state.get('fields').toObject(), ...action.data.person }) )

case PERSON_INIT:
    return state.setIn(['fields', 'name'], action.data.person.name );

case PERSON_UPDATE_FIELD:
    return state.setIn(['fields', action.payload.field ], action.payload.value );

祝你好运。
什么是
转换为字段
？什么是
ImmutableInputText
？正如你在我的Reducer中看到的，我有“数据”和“字段”。我想在我的“字段”控制台中存储http响应数据。log（response.data），响应数据的结构是什么？
调用render（），data（在我的Reducer中）有一些值，但没有字段
，这是因为您注释掉了这一行
//return state.set（“fields”，Immutable.fromJS（action.fields））
这不会解决所有问题。。。