本文介绍了reducer.state.props 在嵌套动作 react/redux 中未定义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

新问题:根据更新的代码 - 当我在 reducer 中打印出有效负载时 - 我看到带有 api 数据的 maindata 但 SubData [{}, {}, {}] ..?

New issue: as per the updated code - when i print out payload in reducer - I see maindata with the api data but SubData [{}, {}, {}] ..?

更新代码:从 '../constants/types' 导入 { GET_DATA_AND_SUBDATA };

Updated code: import { GET_DATA_AND_SUBDATA } from '../constants/types';

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);
}

推荐答案

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

The problem lies on the way you dispatch the actions.

您没有同时为 mainDatasubdataOneData 提供数据.

You are not providing data for mainData and subdataOneData at the same time.

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 尚不可用.

At first render your subdataOneData is not availble yet.

您甚至没有在 reducer 中指定默认值,因此它将是 undefined.

You are not even specifying a default value in the reducer, therefore it will be undefined.

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

You can change your action thunk like this

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 }
        });

    };
}

并相应地更改您的减速器,以便一次设置所有数据.

And change your reducer accordingly in order to set all data at once.

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;
    }
}

注意:在 reducer 中设置初始状态也是一个好习惯.

Note: it's also a good practice to set your initial state in the reducer.

const initialState = {
    mainData: // SET YOUR INITIAL DATA
    subdataOneData: // SET YOUR INITIAL DATA
    subdataTwoData: // SET YOUR INITIAL DATA
}

export default function myReducer(initialState, action) {

这篇关于reducer.state.props 在嵌套动作 react/redux 中未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 08:42