从减速器 Function 中访问 Redux 中的商店的 State

Question

I have a combined reducer with several reducers/states. Looks like follows

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

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

in my userReducer file, i want to access the blogs state from within a function

this is in order to update my users state when a new blog post is saved.

I've tried this:

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

and this

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

but neither are working

ultimately, upon a new blog post, i'm calling a createBlog action creator and an updateUser action creator. my user has a one to many relationship with my blog model. I think i need to update the user's state to include the newly created blog, and figured i could just take the current blogs state, find the user and then replace their blogs with the updated state.

something like this, but also stumped on part of this.

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
      }
    });
  };
};

Answer 1

There is a FAQ part in the Redux documentation about this issue: https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers

You could use reduce-reducers for example:

// In this reducer, the state argument represents your root state
// Here you can handle actions which need to access multiple slice of the root state
const specializedReducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_USER":
      const { blogs, users } = state;
      // proceed with your code here
  }
}

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

const rootReducer = reduceReducers(specializedReducer, reducer);

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

Answer 2

so, as suspected, I was overly complicating things. thanks to the back and forth here, i realized that I could call another listener from another reducer. thus this is how i solve my issue.

in my user reducer i added a case "USER_POSTED_BLOG"

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

and then in my blog reducer i added an additional dispatch to that newly created case, which would grab all of the users and update the state after the new blog is created

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
    });
  };
};

Answer 3

If you want to get your state value in the reducer you don't need getState(). The state value is the first argument in your reducer. So you just call the state in your reducer. If you want to get the state value in your action then you can use getState. Also if you want to extract blogs object from the state object you are going one too far.

Your are doing this:

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

and it should be this:

const { blogs } = store.getState();

Here is an example.

Reducer:

const initialState = {
  //your initial state
}

export default (state = initialState, action) => {
  switch(action.type){
    case "UPDATE_USER":
      // just use the state object
      const { blogs } = state;
      const username = action.data.id.username;
      const userToChange = blogs.find(a => a.username === username);
      const blogsNeedToChange = userToChange.blogs
      const changedUserBlogs = ?????????????
      return state.map(user =>
        user.username !== username ? user : changedUserBlogs
      );
  }
}

Action:

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