Redux和Axios在GET API请求上返回promise对象
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Redux和Axios在GET API请求上返回promise对象相关的知识,希望对你有一定的参考价值。
我试图通过向api发送get请求来获取数据,我正在获取数据,但它在promise对象中,
我尝试了几种技术来解决这个问题,但我无法解决问题。
Reducer:personal-detail-reducer.js
import Http from "../utils/Http";
import {PERSONAL_DETAIL} from "../constants/api";
import {GET_PERSONAL_DETAIL} from "../constants/personsal-detail-constants";
const initialState = {
data: ''
};
const personalDetailReducer = (state = initialState, action) => {
if(action.type === GET_PERSONAL_DETAIL){
return (dispatch) => {
return Http.get(PERSONAL_DETAIL).then(response => {
return{
data: dispatch(response.data.data)
};
}).catch(error => {});
}
}
return state;
};
export default personalDetailReducer;
组件:personal-detail.js
const mapStateToProps = (state) => {
return{
state
}
};
const mapDispatchToProps = (dispatch) => {
return {
onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
}
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);
我已经配置了thunk
store.js
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
import {rootReducer} from '../reducers/index';
const loggerMiddleware = createLogger();
export const store = createStore(
rootReducer,
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
);
请找附件以供参考Here is the dispatch response in next state and console as well which is returning dispatch
我通常不在我的Reducer中包含HTTP调用。请记住,reducer是所有同步调用,所以处理这个问题的好方法是在thunk动作中。这是一个例子:
/** Notice that those actions are private. not exported to the components */
const getPersonalDetailStart = () => {
return {
type: GET_PERSONAL_DETAIL_START
};
};
const getPersonalDetailSuccess = (profile) => {
return {
type: GET_PERSONAL_DETAIL_SUCCESS,
profile
}
};
const getPersonalDetailFailure = (error) => {
return {
type: GET_PERSONAL_DETAIL_FAILURE,
error
};
};
/** Here is the thunk action that is available to components */
export const getPersonalDetail = () => (dispatch) => {
// Fire start action to display a loading indicator for example
dispatch(getPersonalDetailStart());
// Return the promise the thunk middleware
return BackendAPI.getPersonalDetail().then(
// on success, fire successful action.
response => dispatch(getPersonalDetailSuccess(response.data.profile)),
// on failure, fire failure action to e.g. show error message to user
error => dispatch(getPersonalDetailFailure(error))
);
};
现在在reducer上,只需像执行同步操作一样处理操作。
export const personalReducer = (state, action) => {
switch (action.type) {
case GET_PERSONAL_DETAIL_START:
return {
...state,
isLoading: true
};
case GET_PERSONAL_DETAIL_SUCCESS:
return {
...state,
isLoading: false,
profile: action.profile
};
case GET_PERSONAL_DETAIL_FAILURE:
return {
...state,
isLoading: false,
error: error
};
default:
return state;
}
};
组件演示如下:
import React, {Component, Fragment} from 'react';
import {bindActionCreators} from "redux";
import {connect} from 'react-redux';
import {getPersonalDetail} from './actions/your_actions';
export default class DemoComponent extends Component {
componentDidMount() {
const {getPersonalDetail} = this.props;
getPersonalDetail();
}
render() {
return <div>your html here</div>;
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({getPersonalDetail}, dispatch);
};
DemoComponent = connect(null, mapDispatchToProps)(DemoComponent);
在州有一个承诺,因为reducer返回一个promise而不是一个已解析的数据。为了满足您的要求,应在异步操作完成并解析数据后调用reducer。因此,您可能希望将HTTP请求从reducer中移出到操作创建者,并在数据解析后立即调度相应的操作。
通常,动作创建者保存在单独的文件中,例如
个人细节actions.js
import Http from "../utils/Http";
import {PERSONAL_DETAIL} from "../constants/api";
import {GET_PERSONAL_DETAIL} from "../constants/personsal-detail-constants";
export const setPersonalDetail = payload => ({
type: GET_PERSONAL_DETAIL,
payload,
});
export const fetchPersonalDetail = () => dispatch => {
return Http.get(PERSONAL_DETAIL).then(response => {
return dispatch(setPersonalDetail(response.data.data));
}).catch(e => {
console.error(e);
});
}
由于异步操作现在在动作创建器中被隔离,因此缩减器得到简化:
个人细节reducer.js
import {GET_PERSONAL_DETAIL} from "../constants/personsal-detail-constants";
const initialState = {
data: ''
};
const personalDetailReducer = (state = initialState, action) => {
switch (action.type) {
case GET_PERSONAL_DETAIL:
return {
...state,
data: action.payload
};
default:
return state;
}
};
export default personalDetailReducer;
最后要做的是让组件调用动作创建者(不要忘记将其导入组件):
个人detail.js
const mapStateToProps = (state) => {
return{
state
}
};
const mapDispatchToProps = (dispatch) => {
return {
onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
}
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);
以上是关于Redux和Axios在GET API请求上返回promise对象的主要内容,如果未能解决你的问题,请参考以下文章
Axios GET 请求 Spotify API 返回 401
包含 axios GET 调用的 React-Redux 应用程序测试操作创建者
Axios 和 Redux 返回 undefined,然后解析
使用 axios 和 Redux Saga 调用 API 总是返回 undefined