React Redux中useSelector无法从Reducer获取formId值求助

问题背景 #

从API获取包含formId和pdf的响应后，在Customer1组件中将formId存入Reducer，但在Component2组件中始终无法读取该值。

核心问题排查 #

1. Store状态路径不匹配 #

你的store.js中直接将eFormReducer作为根Reducer创建Store，但组件中却用state.app.eFormReducer.formId来获取状态——这是路径错误：

• 当前Store的根状态就是eFormReducer的initialState，所以正确的状态路径应该是state.formId，而非嵌套的state.app.eFormReducer.formId。
• 如果你的项目实际是用combineReducers合并了多个Reducer（比如app下包含eFormReducer），但当前store.js并没有做合并，导致路径完全不匹配。

2. 拼写错误导致Action触发失败 #

在Customer1组件的错误处理分支中，你写了udispatch（小写u），但定义的dispatch变量是uDispatch（大写U）：

// 错误写法
udispatch(eFormActions.setSignFormResponsePdfError());
// 正确写法
uDispatch(eFormActions.setSignFormResponsePdfError());

虽然这个分支只有在formId或pdf不存在时才会执行，但一旦触发会导致错误Action无法分发，同时后续代码仍会执行，可能将undefined传入setFormData。

3. API数据判断逻辑冗余且有漏洞 #

你先判断data?.pdf != null，之后又重复判断data.formId === undefined || data.pdf === undefined，且没有在错误时终止流程：

• 如果data.pdf存在但formId不存在，错误Action会触发，但后续代码仍会执行，将undefined存入formId。
• 逻辑冗余，且未处理formId为null的情况。

修复方案 #

方案1：修正状态路径（无Reducer合并场景） #

如果不需要合并多个Reducer，直接调整组件中的Selector：

// Customer1.js
const eFormState = useSelector(state => state); // 直接取根状态

// Component2.js
const formId1 = useSelector(state => state.formId); // 直接取根状态下的formId
console.log('formId', formId1);

方案2：合并Reducer（多Reducer场景） #

如果需要保持state.app.eFormReducer的路径，修改store.js使用combineReducers：

// store.js
import { createStore, combineReducers } from "redux";
import eFormReducer from "./reducer";

// 合并Reducer
const rootReducer = combineReducers({
  app: combineReducers({
    eFormReducer
  })
});

const store = createStore(
  rootReducer,
  typeof window === "object" && typeof window.__REDUX_DEVTOOLS_EXTENSION__
    ? window.__REDUX_DEVTOOLS_EXTENSION__()
    : (f) => f
);

export default store;

此时组件中的state.app.eFormReducer.formId路径即可正确获取值。

方案3：修正拼写错误与逻辑漏洞 #

调整Customer1组件的API请求逻辑，修复拼写错误并终止错误流程：

const sendCreateFormRequest = async () => {
  const { data } = await SendCreateFormRequestService(eFormState.requestData);

  // 合并判断，确保formId和pdf都存在
  if (!data?.formId || !data?.pdf) {
    uDispatch(eFormActions.setSignFormResponsePdfError());
    return; // 终止后续代码执行
  }

  const blob = base64ToBlob(data.pdf, "application/pdf");
  const pdfURL = URL.createObjectURL(blob);
  uDispatch(eFormActions.setSignFormResponsePdfSuccess(pdfURL));
  uDispatch(eFormActions.setFormData(data.formId));
};

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