问题描述
新问题:根据更新的代码 - 当我在 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.
您没有同时为 mainData
和 subdataOneData
提供数据.
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 中未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!