gpt4 book ai didi

javascript - react redux normalizr : how to deal with nested entities?

转载 作者:搜寻专家 更新时间:2023-11-01 04:35:50 25 4
gpt4 key购买 nike

假设我有一个这样的结构,它是从 API 获取一次并在我的实体上使用“normalizr”的结果:

entities: {
users:{
1: {
name: 'John',
posts: [ 1, 4 ]
}
},
posts: {
1: {
name: 'First Post',
},
4: {
name: 'Second Post',
}
}
}

现在我有一个按用户过滤帖子的方法,基本上可以这样做:

let filteredPosts = {};
entities.users.posts.forEach(key => {
if(posts.hasOwnProperty(key))
filteredPosts[key] = posts[key]
});

以及显示该用户帖子的页面,例如:

render() {
return(
<div>
{Object.keys(filteredPosts).map(key => {
return (
<div>{filteredPosts[key].name}</div>
);
})}
</div>
)
}

我的实体 reducer 非常简单:

import { merge } from 'lodash';
...
function entities(state = { users: {}, posts: {} }, action) {
if (action.response && action.response.entities) {
return merge({}, state, action.response.entities);
}
return state;
}

现在,如果我向 API 发出请求为该用户添加帖子,返回新创建的帖子记录,该记录将自动添加到我实体的帖子中。

我将如何处理更新用户以反射(reflect)该更改,以便用户现在有 3 个帖子,数组中有新的帖子 ID?

我应该创建一个 reducer 并监听创建后的操作,然后更新其中的 state.entities.users.posts 吗?重新获取实体似乎不是一种选择。最好的方法是什么?

谢谢

更新:

这是我现在必须使用的解决方案来保持数据的一致性。我修改我的回复以说明创建的帖子 ID。我知道这可以分解为多个缩减器,但我仍然想知道是否有更好、更直接的方法,我不必为每个嵌套实体都这样做。

function entities(state = {}, action) { 
...

if(action.type === 'POST_ADD_SUCCESS') {
// Get the user id from the created post
let userId = response.entities.posts[response.result].userId;
// Add the user with all his posts to the response
response.entities.users = {
[userId]: {
posts: [...state.users[userId].posts, response.result]
}
}
}
...
// Merge normally
return merge({}, state, response.entities);
}

最佳答案

您更新的代码段看起来大部分是正确的,但我不确定您为什么仍然在其中引用“响应”。您的操作创建器函数可能应该获取用户 ID 和帖子 ID,并且当 AJAX 调用成功时,创建一个类似于 {type : POST_ADD_SUCCESS, userId : userId : postId} 的操作。换句话说,reducer 根本不应该知道任何关于“响应”的信息,只是它应该将帖子 ID“x”添加到用户 ID“y”的列表中。

关于javascript - react redux normalizr : how to deal with nested entities?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35091567/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com