Reactjs 更新 redux 存储中的嵌套数据

发布于08月21日

使用redux更新存储中嵌套数据数组的最佳/正确方法是什么？

我的store 是这样的:

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

我有一对异步操作更新完整的items对象，但我还有一对操作要更新特定的linksarray.

我的减速机目前看起来像这样，但我不确定这是否是正确的方法:

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
      // TODO: check whether the following is acceptable or should we create a new one?
      state.items[action.resourceTypeId].isSourceOf.push(action.resourceTypeLink);
      return Object.assign({}, state, {
        items: state.items,
      });
  }

推荐答案

React's update() immutability helper是一种方便的方法，可以创建普通旧JavaScript对象的更新版本，而无需对其进行修改.

您给它一个要更新的源对象，以及一个描述需要更新的片段路径和需要进行的更改的对象.

e、例如，如果一个动作有id和link属性，并且你想将link推送到一个以id为键的项目中的链接数组中:

var update = require('react/lib/update')

// ...

return update(state, {
  items: {
    [action.id]: {
      links: {$push: action.link}
    }
  }
})

(示例使用ES6计算(computed)属性名称表示action.id)

Reactjs相关问答推荐

InfiniteScroll持续获取数据，直到超过最大更新深度

CSS转换不适用于React MUI对象

有没有办法让两个状态在两次精准渲染中更新？

Reaction Ploly：如何在多个子情节中共享zoom 状态

如何解决Reaction中遗留的上下文API错误？

Reaction路由-如何在布局路由内呈现&q；/：id&q；路由

React，当我调用handleSubmit()函数时，我正在将application/json和multiform/data中的数据发送到后端，但student_image中没有数据：null

ctx.strokeStyle 在 canvas html 5 中不起作用

Material-UI 和 React Hook 表单不记录值

在 React 中使用forwardRef时无法声明自定义属性

Yup.number().integer() 不将 1.0 视为小数，如何解决这个问题？

useRef 不关注模态

如何在 Next Js 13 App Router 中添加 Favicon 图标？

我收到Uncaught TypeError： props.handleSelect is not a function

如何在 ReactJS 中提交后删除 URL 中的查询参数

如何在 React map 函数循环中使用
标签

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩？

如何根据react 中的 map 功能一次只打开一个弹出窗口？

ReactJS：按钮启用禁用更改 colored颜色

React - useParams() 不会失败 null / undefined 判断

实用课程推荐