如何修改含Firestore异步函数的Reducer状态？Redux Thunk使用异常求助

兄弟，你这儿踩了Redux的一个核心坑：Reducer必须是纯函数，不能包含异步操作，也不能返回函数（你现在在create-chatroom case里返回了一个dispatch函数，这是Thunk该干的活儿，不是Reducer的职责）。这就是为什么你的Reducer在DevTools里消失了——Redux会认为这个Reducer的返回值无效，直接忽略了它。

下面是具体的修复步骤：

1. 把异步逻辑移到Thunk Action Creator中 #

Thunk的作用就是让你能写返回函数的action creator，用来处理异步操作（比如Firestore的读写）。我们把创建聊天室的逻辑单独抽出来：

// 这是你的action creator文件（比如chatroomActions.js）
export const createChatroom = (roomData) => {
  return async (dispatch) => {
    try {
      const user = Auth.currentUser;
      const { roomName, public: isPublic } = roomData;
      
      // 向Firestore写入数据
      await Db.collection("chatrooms")
        .doc(roomName)
        .set({
          authUsers: [user.uid],
          messages: {
            data: {
              sender: "notification",
              text: `${roomName} has been created`,
              timestamp: FieldValue.serverTimestamp(),
            },
          },
          public: isPublic,
        });
      
      // 写入成功后，分发同步action更新状态
      dispatch({ 
        type: "set-current-room", 
        payload: roomName 
      });
    } catch (err) {
      console.error("创建聊天室失败：", err);
      // 这里可以根据需求分发错误action，或者处理错误状态
      // dispatch({ type: "create-chatroom-error", payload: err });
    }
  };
};

2. 保持Reducer的纯净性 #

Reducer只负责处理同步action，根据action类型返回新的状态。注意一定要加默认case，否则Redux会报错：

// 你的Reducer文件
const initialState = null; // 或者根据你的需求设置初始状态，比如空字符串/对象

const chatroomReducer = (state = initialState, action) => {
  switch (action.type) {
    case "set-current-room":
      // 返回新的状态，不要修改原state
      return action.payload;
    // 如果需要处理错误状态，可以加这个case
    // case "create-chatroom-error":
    //   return { ...state, error: action.payload };
    default:
      // 默认case必须返回当前state，否则会导致状态丢失
      return state;
  }
};

export default chatroomReducer;

3. 组件中使用这个Thunk Action #

在你的组件里，通过useDispatch（如果用React-Redux hooks）来分发这个action：

import { useDispatch } from "react-redux";
import { createChatroom } from "./chatroomActions";

// 组件内部
const dispatch = useDispatch();

// 调用创建聊天室的方法
const handleCreateChatroom = () => {
  dispatch(createChatroom({
    roomName: "我的聊天室",
    public: true
  }));
};

为什么这么改？ #

• Reducer的职责：Reducer是纯函数，只做一件事——接收当前状态和action，返回新的状态。它不能有副作用（比如异步请求、修改外部变量），也不能返回函数。
• Thunk的职责：Thunk中间件允许你写返回函数的action creator，这个函数可以拿到dispatch和getState，用来处理异步操作，然后在异步操作完成后分发同步action来更新状态。

这样修改后，你的Reducer会正常出现在Redux DevTools里，异步操作也能正确更新状态啦！

内容的提问来源于stack exchange，提问作者Okoli_Ryan