reducer.state.props 在嵌套操作 react/redux 中未定义

Question

下面是我的操作和化简器文件 - 在我的组件状态下，我只看到这个.props.mainData - 但其他子数据OneData等，没有加载到状态中 - 直到化简器我看到正在调度正确的操作，我也看到了子调用的数据 - 但它们没有到达我的组件 - 我有地图状态道具 - 我在哪里做

新问题：根据更新的代码 - 当我在 reducer 中打印出有效负载时 - 我看到带有 api 数据的主数据，但子数据 [{}， {}， {}] ..？

更新的代码： GET_DATA_AND_SUBDATA从 '../常量/类型';

export function getMainData() {
  return async function getMainData(dispatch) {
    const { data } = await getMainDataAPI();
    const subData = data.map((item) => {
      const endpoint = 'build with item.name';
      return Request.get(endpoint);
    });
     console.log('subddd' + subData);  prints -> **[object Promise],[object Promise],[object Promise]**
    dispatch({
      type: GET_DATA_AND_SUBDATA,
      payload: { data, subData }
    });
  };
}
async function getMainDataAPI() {
  const endpoint = 'url';
  return Request.get(endpoint);
}

Answer 1

问题在于您调度操作的方式。

您不会同时为mainData和subdataOneData提供数据。

export function getData() {
    return async function getData(dispatch) {
        const { data } = await getDataAPI();
        // This will cause first re-render
        dispatch({ type: GET_DATA, payload: data }); 
        Object.keys(data).map((keyName, keyIndex) => {
            const endpoint = 'ENDPOINT';
            Request.get(endpoint).then((response) => {
                // This will cause second re-render
                dispatch({
                    type: GET_subdata + keyIndex,
                    payload: response.data });
                }); 
            return keyIndex;
        });
    };
}

起初，渲染您的subdataOneData尚不可用。

您甚至没有在化简器中指定默认值，因此它将undefined .

你可以像这样改变你的动作

export function getData() {
    return async function getData(dispatch) {
        const { data } = await getDataAPI();
        const subDataResponse =  await Promise.all( 
            Object.keys(data).map( () => {
                const endpoint = 'ENDPOINT';
                return Request.get(endpoint)                    
            })
        )
        const subData = subDataResponse.map( response => response.data )
        dispatch({
            type: GET_DATA_AND_SUBDATA
            payload: { data, subData }
        });
    };
}

并相应地更改您的化简器，以便一次设置所有数据。

export default function myReducer(state = {}, action) {
    switch (action.type) {
        case GET_DATA_AND_SUBDATA:
        return {
            ...state,
            mainData: action.payload.data,
            subdataOneData: action.payload.subData[0],
            subdataTwoData: action.payload.subData[1]
        };        
        default:
            return state;
    }
}

注意：在化简器中设置初始状态也是一种很好的做法。

const initialState = {
    mainData: // SET YOUR INITIAL DATA
    subdataOneData: // SET YOUR INITIAL DATA
    subdataTwoData: // SET YOUR INITIAL DATA
}
export default function myReducer(initialState, action) {