正在为引用字段更新Redux中的存储



我有一个博客应用程序,有一个blog和一个User模型,两者都相互引用。一个用户和博客模型有一对多的关系。我需要在博客页面上显示博客的完整列表,在用户页面上显示用户的完整列表。

如果登录的用户创建了一篇博客文章,我的Blogs reducer中的操作创建者会将博客保存到数据库中,并更新Blogs状态。我对后端的post调用是将博客文章和用户数据保存到数据库中,但我在user reducer文件中没有任何操作来更新用户状态。

在我的应用程序的初始渲染中,我加载所有的用户和博客。

因此,我的初始存储在用户登录时的状态如下:

LOGGED_USER
BLOGS
USERS

我正在尝试更新与新博客文章关联的用户的状态,但很难弄清楚如何做到这一点。我想我可能必须在更新用户操作创建者中访问共享存储中的博客状态。

EDIT/UPDATE我意识到,如果我尝试调用一个操作创建者来更新博客的状态,然后再调用另一个单独的创建者来更新用户的状态,那么在新博客中,我就会开始遇到id不匹配的潜在问题,因为当一篇新博客发布时,它会自动生成id。因此,我认为(但很可能是错误的(,当我试图更新用户时,我确实需要打电话到商店来获取更新的博客状态。

所以,它会是这样的:

使用addBlog处理程序在前端创建带有新博客内容的博客帖子表单

const addBlog = async event => {
event.preventDefault();
const blogObject = {
url: newURL.value,
title: newTitle.value,
author: newAuthor.value
};
await props.createBlog(blogObject);
await props.updateUser(props.loggedUser, blogObject);
props.history.push("/blogs");
setNotification(`New Blog Created!`, 4);
};

CALL从我的blogReducer和UserReducer文件创建博客并更新用户操作创建者:

blogReducer.js

const blogReducer = (state = [], action) => {
switch (action.type) {
case "NEW_BLOG":
return [...state, action.data];
export const createBlog = content => {
return async dispatch => {
const newBlog = await blogService.create(content);
dispatch({
type: "NEW_BLOG",
data: newBlog
});
};
};

userReducer.js

**export const updateUser = (id, blog) => {
return async dispatch => {
dispatch({
type: "UPDATE_USER",
data: {
id: id,
data: blog
}
});
};
};**
const userReducer = (state = [], action) => {
switch (action.type) {
case "NEW_USER":
return [...state, action.data];
case "UPDATE_USER":
const {blogs} = store.getState().blogReducer.blogs
const username = action.data.id.username;
console.log("Action Data", action.data);
const userToChangeBlogs = blogs.find(a => a.user.username === username);
console.log("User to Change", userToChange);
const changedUser = userToChangeBlogs.blogs.concat(action.data.data);
console.log("Change User", changedUser);
return state.map(user =>
user.username !== username ? user : changedUser
);
case "DELETE_USER":
const removeObject = action.data;
return state.filter(user => user.id !== removeObject.id);
case "INIT_USERS":
return action.data;
default:
return state;
}
};

然而,当我开始研究这个updateUser操作创建者时,我对如何处理这个问题感到困惑。好的,我从商店获取博客状态,从发送新博客表单和新博客内容的人那里获取用户名。然后我从提交的表单中查找该用户的博客存储状态

然后我做什么。。。我已经走到了死胡同!我是否只是进入用户状态,并用博客商店中所有更新的博客进行替换?

我觉得我正在把这种方式变得比需要的更复杂。

您的action.data对象有您想要的data密钥以及id密钥。

您可能应该修改:const changedUser = userToChange.blogs.concat(action.data)通过const changedUser = userToChange.blogs.concat(action.data.data)

最新更新