如何在 React Redux 中获取特定的状态值？答案

【问题标题】：How to get a particular state value in React Redux?如何在 React Redux 中获取特定的状态值？
【发布时间】：2021-10-28 17:10:44
【问题描述】：

在 Redux 中，我目前的状态如下所示。

{
  activeConversation: "Jim"
  conversations: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
  user: {id: 8, username: "josh", email: ""}
}

我目前有一个向对话数组添加新消息的函数。这是它的工作原理；它首先在thunk 中调用它。

export const postMessage = (body) => async (dispatch) => {
  try {
      if (!body.conversationId) {
        dispatch(addConversation(body.recipientId, data.message));
      } else {
        dispatch(setNewMessage(data.message));
      }
  } catch (error) {
    console.error(error);
  }
};

如果conversationId 存在，那么它会在Actions 中调用setNewMessage。

const SET_MESSAGE = "SET_MESSAGE";
export const setNewMessage = (message, sender) => {
  return {
    type: SET_MESSAGE,
    payload: { message, sender: sender || null },
  };
};

const reducer = (state = [], action) => {
  switch (action.type) {
    case SET_MESSAGE:
      return addMessageToStore(state, action.payload);
    default:
      return state;
  }
};

export default reducer;

问题在于此操作中的状态仅包含对话数组，而不包含其他任何内容。我需要的是还拥有activeConversation，这样我就可以在我的减速器功能中使用它。我不太清楚状态是如何工作的，所以我不知道为什么只有对话数组出现在 state 中而不是其他任何东西。

另外，activeConversation 的设置方式如下。

const SET_ACTIVE_CHAT = "SET_ACTIVE_CHAT";

export const setActiveChat = (username) => {
  return {
    type: SET_ACTIVE_CHAT,
    username
  };
};

const reducer = (state = "", action) => {
  switch (action.type) {
    case SET_ACTIVE_CHAT: {
      return action.username;
    }
    default:
      return state;
  }
};

我想知道如何为我的 set message reducer 函数获取 activeConversation 状态。

【问题讨论】：

动作没有状态，但我想我明白了。听起来您想在同一个 reducer 函数中同时引用 activeConversation 和 conversations 数组。为此，应该将 state 和 reducer 函数结合起来，换句话说，您可能将 state 拆分得太多了。您能否详细描述一下您希望如何合并和使用这两种状态？
你有根 reducer 来组合你在 reduce 中所做的状态位置吗？
我相信我会。我应该只使用它还是有办法可以组合多个状态？
正如@DrewReese 指出的那样，您需要组合状态或另一种方法是将activeConversation 作为有效负载传递。这样你就可以在减速器内部做action.payload.activeConversation .
我不一定想从 thunk 传递它，因为我需要知道 activeConversation 在那个特定点的当前状态。我想知道是否有办法从我的减速器函数中访问activeConversation 的状态（注意我已经导入了activeConversation 减速器）。

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

Thunk 将允许您使用方法getState 作为第二个参数访问整个商店。因此您可以将您的动作创建者更改为

export const postMessage = (body) => async (dispatch, getState) => {
  try {
    if (!body.conversationId) {
      dispatch(addConversation(body.recipientId, data.message));
    } else {
      const { activeConversation } = getState();
      dispatch(setNewMessage(data.message, activeConversation));
    }
  } catch (error) {
    console.error(error);
  }
};

将状态作为有效负载传递给您的操作对象。

export const setNewMessage = (message, activeConversation, sender) => {
  return {
    type: SET_MESSAGE,
    payload: { message, activeConversation, sender: sender || null },
  };
};

一旦你在 action payload 中有它，你就可以在你的 reducer 中读取它为action.payload.activeConversation

thunk 提供的 getState() 方法将保证该特定时间点的存储状态。因为它实际上只是 redux 提供的对 store.getState() 的调用。

参考

Thunk getState

Accessing getState in action creator

Good explanation on accessing getState

【讨论】：

虽然这确实让我获得了正确的状态，但我正在做的是一个向另一个用户发送消息的聊天应用程序。所以，在 thunk 调用之后，我再调用 sendMessage(data, body);`` that uses socket.io to send the data to the other user. On socket.io, it would then call store.dispatch(setNewMessage(data.message, data.sender))``` 如果我传入从 thunk 获得的状态，我想知道是不是将是其他用户的正确状态。
@JoshSusa 试一试，在我们尝试之前我们不会知道 :-)
你的 thunk 中的 activeConversation 有什么价值吗？ .我建议您检查 Redux 开发工具，以及我们在调度操作时是否看到 activeConversation 处于状态。
好的，我让它工作了，但它仍然是双方的同一个活跃用户。我希望每个用户的活动用户都不同。是否可以从我的对话减速器中获取状态？