React Redux问题：无法从Reducer获取formId至组件

我通过API获取了包含formId和pdf的数据，在Customer1组件中将formId存入Reducer（已通过Reducer中的console.log确认该值存在），但在Component2组件中无法读取到该formId。需要协助排查原因，解决组件无法从Reducer读取formId的问题，让formId可在全应用中访问。

相关代码 #

Reducer.js #

import * as types from "./actions";

export const initialState = {
  pdfData: "",
  pdfURL: "",
  pdfLoaded: false,
  pdfError: false,
  formId: "",
  successMessage: "",
  requestData: {
    customerName: "customer",
    locationNumber: "2323",
    languageList: [
      {
        languageCode: "ENG",
      },
    ],
     cityName: "cityName",
     countryCode: "test",
     countryName: "test",
  }
};

const eFormReducer = (state = initialState, action) => {
    switch (action.type) {
        case types.SET_FORM_DATA:
            return {
               ...state,
                formId: action.payload,
            };
        case types.SUCCESS_SIGNED_PDF:
            return {                                
           ...state,
            pdfURL: action.payload,
            pdfLoaded: true,
            pdfError: false,
            };
        case types.ERROR_SIGNED_PDF:
            return {
           ...state,
            pdfLoaded: false,
            pdfError: true,
          };
     default:
      return state;
  }
};

export default eFormReducer;

actions.js #

export const SUCCESS_SIGNED_PDF = "SUCCESS_SIGNED_PDF";
export const ERROR_SIGNED_PDF = "ERROR_SIGNED_PDF";
export const SET_FORM_DATA = "SET_FORM_DATA";

export const setSignFormResponsePdfSuccess = (payload) => ({
  type: SUCCESS_SIGNED_PDF,
  payload,
});

export const setSignFormResponsePdfError = (payload) => ({
  type: ERROR_SIGNED_PDF,
  payload,
});

export const setFormData = (payload) => ({
    type: SET_FORM_DATA,
    payload,
});

Customer1.js #

import React, { useContext, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import * as eFormActions from "./actions";
import SendCreateFormRequestService from "services/SendCreateFormRequestService";

  const uDispatch = useDispatch();
  const eFormReducer = useSelector((state) => state.app.eFormReducer);

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

    if (data?.pdf!= null) {
      if (data.formId === undefined || data.pdf === undefined) {
         udispatch(eFormActions.setSignFormResponsePdfError());
        }

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

Component2.js #

import React, { useContext, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import * as eFormActions from "./actions";

  const uDispatch = useDispatch();
  const eFormReducer = useSelector((state) => state.app.eFormReducer);
  const formId1 = useSelector(state => state.app.eFormReducer.formId);

console.log('formId', formId1)

排查步骤及解决方案 #

1. 修正Customer1中的拼写错误 #

Customer1的错误处理分支中，udispatch存在大小写错误，应改为uDispatch，否则该分支的action无法正确触发：

// 错误代码
udispatch(eFormActions.setSignFormResponsePdfError());
// 修正后
uDispatch(eFormActions.setSignFormResponsePdfError());

2. 确认Component2在Redux Provider范围内 #

确保Component2组件被Redux的Provider组件包裹，只有Provider范围内的组件才能通过useSelector访问Redux状态。如果Component2在Provider外部渲染，必然无法读取状态。

3. 验证Store的Reducer合并配置 #

检查Redux Store的配置，确认eFormReducer被正确合并到app命名空间下。例如：

import { combineReducers, createStore } from 'redux';
import eFormReducer from './path/to/eFormReducer';

const rootReducer = combineReducers({
  app: combineReducers({
    eFormReducer
    // 其他reducer
  })
});

export const store = createStore(rootReducer);

若你的Reducer合并方式不同（比如直接放在根层级），则Component2中的useSelector需要调整为：

const formId1 = useSelector(state => state.eFormReducer.formId);

4. 检查Component2的状态订阅 #

在Component2中打印整个eFormReducer状态，确认是否是formId未更新：

console.log('完整状态', eFormReducer);

如果打印结果是初始状态，说明组件未正确订阅到Redux状态更新，需检查Provider或Store配置。

5. 确认异步逻辑执行时机 #

确保sendCreateFormRequest函数被正确触发（比如通过useEffect或点击事件），否则formId不会被存入Reducer。

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