Flutter Redux连续dispatch动作致状态重置问题求助

问题现象 #

App启动时需调用两个REST API：

1. 获取用户功能列表，对应Redux状态userFunctionList
2. 获取聊天气泡列表，对应Redux状态chatBubbleList

单独调用第一个API并执行store.dispatch(AddUserFunctionList)时，状态更新正常且UI可展示；但同时调用两个API，执行第二个store.dispatch(AddChatBubbleList)后，userFunctionList会被重置为初始空数组，无法正常保留前一次的状态更新。

相关代码 #

state.dart #

class AppState {
  final List userFunctionList;
  final List chatBubbleList;

  const AppState({
    required this.userFunctionList,
    required this.chatBubbleList,
  });

  AppState.initialState()
      : userFunctionList = [],
        chatBubbleList = [];
}

model.dart #

class AddUserFunctionList {
  late final List userFunctionList;
  AddUserFunctionList({
    required this.userFunctionList,
  });
}

class AddChatBubbleList {
  late final List chatBubbleList;
  AddChatBubbleList({
    required this.chatBubbleList,
  });
}

store.dart #

final store = new Store(
  appReducer,
  initialState: new AppState.initialState(),
);

reducer.dart #

List userFunctionsListReducer(List existingData, dynamic action) {
  if (action is AddUserFunctionList) {
    return action.userFunctionList;
  }
  return [];
}
List chatBubbleListReducer(List existingData, dynamic action) {
  if (action is AddChatBubbleList) {
    return action.chatBubbleList;
  }
  return [];
}
AppState appReducer(AppState state, dynamic action) {
  return new AppState(
   chatBubbleList: chatBubbleListReducer(state.chatBubbleList, action),
   userFunctionList: userFunctionsListReducer(state.userFunctionList, action),
  );
}

页面调用逻辑 #

首页initState中调用getUserFunctionList()和getChatBubbleList()，接口响应后执行dispatch：

1. 第一个接口回调：store.dispatch(AddUserFunctionList(userFunctionList: response['data']));
2. 第二个接口回调：store.dispatch(AddChatBubbleList(chatBubbleList: response['data']));

UI连接状态 #

StoreConnector<AppState, List>(
 converter: (store) => store.state.userFunctionList,
 builder: (context, userFunctionList) {
   return UserFunctionListView(
     userFunctionList: userFunctionList, 
   );
 }
)

核心原因 #

问题出在子reducer的逻辑上：

• userFunctionsListReducer在收到非AddUserFunctionList类型的action时，返回空数组[]而非传入的existingData
• 同理，chatBubbleListReducer在收到非AddChatBubbleList类型的action时，也返回空数组

当执行第二个dispatch（AddChatBubbleList）时，appReducer会同时调用两个子reducer：

• chatBubbleListReducer匹配到action，返回新的聊天气泡列表
• userFunctionsListReducer未匹配到action，直接返回空数组，覆盖了之前已经更新的userFunctionList状态

修复方案 #

修改两个子reducer，当action不匹配时，返回原有的状态数据而非空数组：

修改后的reducer.dart #

List userFunctionsListReducer(List existingData, dynamic action) {
  if (action is AddUserFunctionList) {
    return action.userFunctionList;
  }
  // 不匹配action时返回原有数据，保留当前状态
  return existingData;
}
List chatBubbleListReducer(List existingData, dynamic action) {
  if (action is AddChatBubbleList) {
    return action.chatBubbleList;
  }
  // 不匹配action时返回原有数据，保留当前状态
  return existingData;
}
AppState appReducer(AppState state, dynamic action) {
  return new AppState(
   chatBubbleList: chatBubbleListReducer(state.chatBubbleList, action),
   userFunctionList: userFunctionsListReducer(state.userFunctionList, action),
  );
}

这样处理后，每次dispatch只会更新对应状态，其他状态会保留原有值，不会被重置为空数组。

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