假设我有一个名为 BookOverview 的组件，用于显示一本书的详细信息。
我正在通过一个动作获取数据：
componentDidMount() {
this.props.getBook(areaId);
}
然后我用 axios 获取数据：
export const getBook = () => async dispatch => {
const res = await axios.get(
`${API}/${ENDPOINT}`
);
dispatch({
type: GET_BOOK,
payload: res.data
});
};
我该如何将此代码更改为：
请问实现这一目标的最佳做法是什么？
你可以像这样getState在你的异步动作创建者内部：
export const getBook = () => async (dispatch, getState) => {
if(!getState().book /* check if book not present */) {
const res = await axios.get(
`${API}/${ENDPOINT}`
);
dispatch({
type: GET_BOOK,
payload: res.data
});
} else {
dispatch({
type: GET_BOOK,
payload: getState().book
});
}
};
你可以这样试试：
componentDidMount() {
if(this.props.book==null){
this.props.getBook(areaId);
}
}
我假设你book在你的props中调用了一个属性。从特定的减速器填充。
您必须订阅特定的减速器才能获得this.props.book- 这给出了您在商店中拥有的value。