时间戳

首页 > 解决方案 > 从 Reducer 函数中访问 Redux 中的 Store 状态

javascript - 从 Reducer 函数中访问 Redux 中的 Store 状态

问题描述

我有一个带有几个减速器/状态的组合减速器。看起来如下

const reducer = combineReducers({
  blogs: blogReducer,
  notification: notificationReducer,
  search: searchReducer,
  filter: filterReducer,
  users: userReducer,
  loggedUser: loginReducer
});

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

在我的 userReducer 文件中，我想从函数中访问博客状态

这是为了在保存新博客文章时更新我的​​用户状态。

我试过这个：

import store from "../store";
const { blogs } = store.getState().blogReducer.blogs;

和这个

const { blogs } = store.getState().blogs;

但两者都没有工作

最终，在一篇新的博客文章中，我调用了 createBlog 操作创建者和 updateUser 操作创建者。我的用户与我的博客模型有一对多的关系。我想我需要更新用户的状态以包括新创建的博客，并认为我可以只获取当前的博客状态，找到用户，然后用更新的状态替换他们的博客。

像这样的东西，但也难倒其中的一部分。 

const userReducer = (state = [], action) => {
      switch (action.type) {
        case "NEW_USER":
          return [...state, action.data];
        case "UPDATE_USER":
          const { blogs } = state;
          console.log("Blogs", blogs);
          const username = action.data.id.username;
          const userBlogs = blogs.filter(b => b.user.username === username);
          const userToChange = state.find(a => a.username === username);
          const changedUser = userToChange.blogs.replace(userBlogs);
          return state.map(user =>
            user.username !== username ? user : changedUser
          );

export const updateUser = (id, blog) => {
  return async (dispatch, getState) => {
    const { blogs } = getState();
    dispatch({
      type: "UPDATE_USER",
      data: {
        id: id,
        data: blog,
        blogs
      }
    });
  };
};

标签： javascriptreactjsreduxreact-redux

解决方案

所以，正如怀疑的那样，我把事情复杂化了。多亏了这里的来回，我意识到我可以从另一个减速器中调用另一个监听器。因此，这就是我解决问题的方法。

在我的用户减速器中，我添加了一个案例“USER_POSTED_BLOG”

 case "USER_POSTED_BLOG":
      return [...action.data];

然后在我的博客化简器中，我为新创建的案例添加了一个额外的调度，它将抓取所有用户并在新博客创建后更新状态

export const createBlog = content => {
  return async dispatch => {
    const newBlog = await blogService.create(content);
    dispatch({
      type: "NEW_BLOG",
      data: newBlog
    });
    const updatedUsers = await userService.getAll();
    dispatch({
      type: "USER_POSTED_BLOG",
      data: updatedUsers
    });
  };
};

推荐阅读