javascript - 在 Redux 中更新存储以获取引用字段

Question

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

如果一个登录用户创建了一篇博文，我的 Blogs reducer 中的 action creator 会将博客保存到数据库，并更新 BLOGS 状态。我对后端的帖子调用是将博客帖子和用户数据保存到数据库中，但我的 User reducer 文件中没有任何操作来更新用户状态。

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

因此，用户登录后我的初始商店状态如下所示:

LOGGED_USER
BLOGS
USERS

我正在尝试更新与新博客帖子关联的用户状态，但很难确定如何执行此操作。我在想我可能必须在更新用户操作创建者中进入博客状态的共享存储。

编辑/更新我意识到，如果我尝试调用一个 Action 创建者来更新博客的状态，然后调用另一个单独的 Action 创建者来更新用户的状态，对于新博客，我开始遇到 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);
  };

从我的 blogReducer 和 User Reducer 文件调用 createBlog 和 updateUser 操作创建者:

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 操作创建者时，我正在为如何处理这个问题而感到困惑。好的，所以我从商店获取博客状态，从发送新博客表单和新博客内容的人那里获取用户名。然后我从提交的表单中查看该用户的博客商店状态

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

我觉得我让这种方式变得比它需要的更复杂。

Answer 1

您的 action.data 对象具有您自己想要的 data 键，以及 id 键。

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