如何让React+Redux中useDispatch存储的customerId在全组件可用？

问题说明 #

我正在使用React和Redux开发项目，API已返回包含customerId等字段的会话数据。我已经编写了API调用代码、Reducer以及Action，但不清楚如何让通过useDispatch写入的customerId等数据在所有组件中可用。

API返回的会话数据示例：

{
    "sessionId": "5f9f0de7-c7b3-3029",
    "customerId": "410742",
    "recepientId": "122",
    "keyPropertiesList": [
        {
            "id": 267076,
            "properties": {
                "customer1": {
                    "firstName": "test",
                    "lastName": "A",
                    "fullName": "test A"
                },
                "userDetail": {
                    "userId": "3770930",
                    "name": "Sam"
                },
                "locationID": "03144"
            }
        }
    ],
    "timeStamp": "2023-05-19T06:12:32Z"
}

当前代码 #

组件代码 #

const Test = () => {
  const [sessionInfo, setsessionInfo] = useState(useSelector(state => state.app.DataReducer.sessionDetails));

  const uDispatch = useDispatch();

  useEffect(() => {
    sessionInformation();

    async function sessionInformation() {
      const session_ID = '5f9f0de7-c7b3-3029'

      console.log("sessionInformaiton: " + session_ID)

      await SessionInformationService({ sessionId: session_ID })
        .then((result) => {
          console.log("Result: " + JSON.stringify(result));

          if (result.data !== undefined) {
            setsessionInfo(result.data);
          }
        });
    }

    uDispatch(types.updateData({
      sessionDetails: {
        customerId: sessionInfo.customerId,
          customerfirstName: sessionInfo.firstName,
          customerlastName: sessionInfo.lastName,
          customerfullName: sessionInfo.fullName,
        }
      })
    );
  }, []);

  return (
    <>
    </>
  )
};

export default Test;

Reducer代码 #

import * as types from './action';

export const initialState = {
  sessionDetails: {
    customerId: '',
    customerfirstName: '',
    customerlastName: '',
    customerfullName: ''
  }
}

const Datareducer = (state = initialState, action) => {
  switch (action.type) {
    case types.UPDATE_DATA:
      const output = action.payload;

      if (output.sessionDetails) {
        state.sessionDetails = output.sessionDetails;
      }

      return {
        ...state,
      }
      break;

    default:
      return state;
  }
}

export default Datareducer;

Action代码 #

export const UPDATE_DATA = 'UPDATE_DATA';

export const updateData = payload => ({
  type: UPDATE_DATA,
  payload
});

问题分析与修正步骤 #

1. 组件代码中的错误修正 #

• 错误点1：useState不能直接接收useSelector的返回值，这不符合React Hooks规则，且完全没必要——Redux状态本身就是全局可共享的，无需存在组件本地state中。
• 错误点2：uDispatch调用时机错误，放在useEffect同步代码中时，API请求还未完成，sessionInfo仍是初始值，无法获取真实返回数据。

修正后的组件代码：

import { useDispatch } from 'react-redux';
import { updateData } from './action';

const Test = () => {
  const uDispatch = useDispatch();

  useEffect(() => {
    const sessionInformation = async () => {
      const session_ID = '5f9f0de7-c7b3-3029';
      console.log("sessionInformaiton: " + session_ID);

      try {
        const result = await SessionInformationService({ sessionId: session_ID });
        console.log("Result: " + JSON.stringify(result));
        
        if (result.data) {
          // 从API返回数据中提取所需字段
          const { customerId } = result.data;
          const { firstName, lastName, fullName } = result.data.keyPropertiesList[0].properties.customer1;
          
          // 直接dispatch更新Redux状态
          uDispatch(updateData({
            sessionDetails: {
              customerId,
              customerfirstName: firstName,
              customerlastName: lastName,
              customerfullName: fullName
            }
          }));
        }
      } catch (error) {
        console.error("获取会话信息失败:", error);
      }
    };

    sessionInformation();
  }, [uDispatch]);

  return <></>;
};

export default Test;

2. Reducer代码修正 #

• 错误点：直接修改state.sessionDetails违反Redux不可变更新原则，可能导致状态更新不触发组件重渲染。

修正后的Reducer：

import * as types from './action';

export const initialState = {
  sessionDetails: {
    customerId: '',
    customerfirstName: '',
    customerlastName: '',
    customerfullName: ''
  }
}

const Datareducer = (state = initialState, action) => {
  switch (action.type) {
    case types.UPDATE_DATA:
      const { sessionDetails } = action.payload;
      // 不可变更新：返回新的state对象，嵌套对象重新解构
      return {
        ...state,
        sessionDetails: sessionDetails ? { ...state.sessionDetails, ...sessionDetails } : state.sessionDetails
      };
    default:
      return state;
  }
}

export default Datareducer;

3. 在其他组件中访问全局状态 #

任意需要使用customerId等数据的组件，通过useSelector获取Redux状态即可：

import { useSelector } from 'react-redux';

const OtherComponent = () => {
  const { customerId, customerfullName } = useSelector(state => state.app.DataReducer.sessionDetails);

  return (
    <div>
      <p>客户ID: {customerId}</p>
      <p>客户全名: {customerfullName}</p>
    </div>
  );
};

export default OtherComponent;

关键注意事项 #

• 确保Redux Store已正确配置，且通过Provider组件包裹整个应用，让所有子组件能访问Redux状态：

  import { Provider } from 'react-redux';
  import store from './store';
  
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );
  

• 始终遵循Redux的不可变更新原则，不要直接修改state对象，必须返回新的状态副本。
• 异步操作（如API请求）完成后再dispatch action，确保传递正确的后端返回数据。

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