Question

我收到来自API的回复如下：

{
    "results": {
        "6": {
            "id": 6,
            "name": "akkha madrasi mirchi1",
        },
        "7": {
            "id": 7,
            "name": "almonds",
        },
        "8": {
            "id": 8,
            "name": "alu1",
        }
    }
}

我将response.results存储在结果缩减器商店{}中，以便我可以results作为store.results访问。我想修改results内的对象。 API仅返回更新的对象。现在我想在store.results中更新id: 6。

{
    "results": {
        "6": {
            "id": 6,
            "name": "Modified akkha madrasi mirchi1",
        }
    }
}

如果我在results reducer中执行此操作：

[...state,action.response]

具有键6的对象是否会用匹配的键替换该对象？

我希望状态为（Modified akkha madrasi mirchi1的注释名称更改为id: 6）：

"results": {
    "6": {
        "id": 6,
        "name": "Modified akkha madrasi mirchi1",
    },
    "7": {
        "id": 7,
        "name": "almonds",
    },
    "8": {
        "id": 8,
        "name": "alu1",
    }
}

我希望对象即使嵌套也要更新。只需匹配密钥并继续更换。

Answer 1

Assuming that state is:

{
    "6": {
        "id": 6,
        "name": "akkha madrasi mirchi1"
    },
    "7": {
        "id": 7,
        "name": "almonds"
    },
    "8": {
        "id": 8,
        "name": "alu1"
    }
}

and you want to update with the following:

const obj = {
  "6": {
        "id": 6,
        "name": "Modified akkha madrasi mirchi1"
   }
};

Then the following will do it:

state = Object.assign( {}, state, obj);

Answer 2

如果我在结果缩减器中执行此操作：
[...state,action.response]
带键6的对象是否会用匹配的键替换对象？

没有。如果你的状态是一个数组，你可以使用这个，但是从你给它的信息中得到一个对象（所有results都是一个以id作为键的对象）。

您可能正在寻找的是这样的：

return {
  ...state,
  ...action.response.results
}

这将创建状态的浅表副本，保留每个结果项的对象引用（如果您不需要，则比执行深层复制更有效）。然后它将使用id: 6中的任何内容覆盖之前的response.results。

要记住这件事：

假设您有可用的对象传播。如果没有，Object.assign({}, state, action.response.results)将具有相同的效果，但（恕我直言）不是那么明确。
无论从服务器返回什么，都会完全取代 id: 6中已有的内容。这意味着如果您在客户端中跟踪该ID的各个状态位，或者服务器没有返回您需要的所有内容，您可能会得到一些意想不到的结果。

＆＃13;

const state = {
  6: {
    id: 6,
    name: 'akkha madrasi mirchi1'
  },
  7: {
    id: 7,
    name: 'almonds'
  },
  8: {
    id: 8,
    name: 'alu1'
  }
}
const response = {
  results: {
    6: {
      id: 6,
      name: 'Modified akkha madrasi mirchi1'
    }
  }
}

console.log({
  ...state,
  ...response.results
})

＆＃13;

为了完整起见，如果您有评论帖子中描述的嵌套结构，请按照以下方式进行减少：

＆＃13;

const state = {
  results: {
    6: {
      id: 6,
      name: 'akkha madrasi mirchi1'
    },
    7: {
      id: 7,
      name: 'almonds'
    },
    8: {
      id: 8,
      name: 'alu1'
    }
  }
}
const response = {
  results: {
    6: {
      id: 6,
      name: 'Modified akkha madrasi mirchi1'
    }
  }
}

console.log({
  ...state,
  results: {
    ...state.results,
    ...response.results
  }
})

＆＃13;

Answer 3

我可以使用immutability-helper

来做到这一点

这是我的行动创作者：

export function itemupdate(response) {
    return {
        type: 'ITEMS_UPDATE_DATA_SUCCESS',
        idx: Object.keys(response.results)[0],
        obj: response.results[Object.keys(response.results)[0]]
    }
}

这就是我如何在结果中替换特定的id对象。

export function data(state = {}, action) {
    case 'ITEMS_UPDATE_DATA_SUCCESS':
        return update(state,{results: {[action.idx]: {$set: action.obj} }})
    default:
        return state;
    }

更新商店属性

3 个答案: