如何更新 React Redux 中的状态？

Question

我正在使用 reducer 在 Redux 中设置状态。我的状态目前看起来像这样。

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

在我的旧减速器中，我只是获取对话数组并进行设置，但现在我还需要访问 activeConversation 字符串。因此，我决定使用我的根减速器，它结合了所有内容，以便它可以正常工作。这是我的根减速器。

import { createStore, applyMiddleware, combineReducers } from "redux";
import loggerMiddleware from "redux-logger";
import thunkMiddleware from "redux-thunk";

import user from "./user";
import conversations from "./conversations";
import activeConversation from "./activeConversation";
import {
addMessageToStore,
} from "./utils/reducerFunctions";

const CLEAR_ON_LOGOUT = "CLEAR_ON_LOGOUT";
const SET_MESSAGE = "SET_MESSAGE";

export const clearOnLogout = () => {
  return {
    type: CLEAR_ON_LOGOUT
  };
};

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

const appReducer = combineReducers({
  user,
  conversations,
  activeConversation
});
const rootReducer = (state, action) => {
  if (action.type === CLEAR_ON_LOGOUT) {
    state = undefined;
  } else if (action.type === SET_MESSAGE) {
    return addMessageToStore(state, action.payload);
  }
  return appReducer(state, action);
};

export default createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware));

我的 setNewMessage 函数被调用，然后调用addMessageToStore。

export const addMessageToStore = (state, payload) => {
  const { message, sender } = payload;
  return { ...state, conversations: state.conversations.map((convo) => {
    if (convo.id === message.conversationId) {
      const newUnread = convo.unreadMessages;
      if (state.activeConversation === convo.otherUser) {
        newUnread = (parseInt(newUnread) + 1).toString();
      }
      const newConvo = {
        ...convo,
        messages: convo.messages.concat(message),
        latestMessageText: convo.latestMessageText,
        unreadMessages: newUnread
      }
      console.log("newConvo:", {...state, conversations: newConvo});
      return {...state, conversations: newConvo};
    } else {
      return {...state, conversations: convo};
    }
  })};
};

问题在于next state 没有更新。当它返回next state 时，它只显示以前的状态而不是我的新状态。有谁知道怎么回事？

Answer 1

我认为您正在“削减”您的状态切片效率低下。充其量，Reducer 应该始终拥有自己的状态，而您现在正竭尽全力为conversations 提供元reducer 以访问activeConversation。

为什么不为两者都配备一个普通的减速器？

有一个形状的状态

{
  user,
  conversations
}

conversations 的形状在哪里

{
  items,
  active
}

这样，您的 conversations 减速器只需访问它自己的状态属性 - items 和 active - 并且不需要任何体操。

Answer 2

我猜这与：

return { ...state, conversations: state.conversations.map((convo) => {
    // ...
        return {...state, conversations: newConvo};
    } else {
        return {...state, conversations: convo};
    }
 }

对于每个对话，您最终会得到整个状态的克隆，但 conversations 键换成了单个对话（例如 {state: { conversations: [ { state: { conversations: convo } } ] }）

你应该这样做

 return { ...state, conversations: state.conversations.map((convo) => {
    // ...
        return newConvo;
    } else {
        return convo;
    }
 }