Javascript React、Redux，响应数据如何在所有组件中可用

首先要解决的问题是减缩函数中的状态Mutations .

state.sessionDetails = output.sessionDetails;改变当前状态对象.浅复制先前状态引用then覆盖属性.有关更多详细信息，请参见Immutable Update Patterns.

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.UPDATE_DATA:
      const { sessionDetails } = action.payload;

      if (sessionDetails) {
        return {
          ...state,
          sessionDetails: {
            ...state.sessionDetails,
            ...sessionDetails,
          }
        };
      }

      return state;

    default:
      return state;
  }
};

第二个问题是Test组件没有正确管理获取数据和更新存储.它在sessionInfo本地状态变量中缓存来自redux的sessionDetails状态的副本，但useEffect同时获取会话数据and，调度updateData操作，该updateData操作只是将未更新的sesstionInfo本地状态发送回存储.实际上，Redux状态不会使用填充的数据进行更新.

不需要本地的sessionInfo状态，useEffect挂钩并直接获取和发送数据.

React组件也使用PascalCase名称，test不是有效Reaction组件，但Test是.重命名该功能组件.

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

  useEffect(() => {
    const sessionInformation = async () => {
      const sessionId = '5f9f0de7-c7b3-3029';

      console.log("sessionInformaiton: ", sessionId);

      try {
        const { data } = await SessionInformationService({ sessionId });

        console.log("Result: ", { data });

        if (data) {
          const userData = {
            sessionDetails: {
              customerId: data.customerId,
              firstName: data.customerfirstName,
              lastName: data.customerlastName,
              fullName: data.customerfullName,
            }
          };

          dispatch(types.updateData(userData));
        }
      } catch (error) {
        // handle any errors, if necessary, or ignore, your call
      }
    };
 
    sessionInformation();
  }, []);

  return (
    <>
      ...
    </>
  );
};

export default Test;

使用useSelector挂钩访问状态. Select 器功能遵循由减法器组合而成的状态 struct .

示例:

import { useSelector } from 'react-redux';

...

const SomeComponent = () => {
  const { customerId } = useSelector(
    state => state.app.DataReducer.sessionDetails
  );

  ...
};