Javascript Redux和Axios在获取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;

const mapStateToProps = (state) => {
    return{
        state
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
    }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

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

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

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;

const mapStateToProps = (state) => {
  return{
    state
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
  }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

组件：personal detail.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;

const mapStateToProps = (state) => {
    return{
        state
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
    }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

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

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

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;

const mapStateToProps = (state) => {
  return{
    state
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
  }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

我已经配置了thunk

store.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;

const mapStateToProps = (state) => {
    return{
        state
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
    }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

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

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

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;

const mapStateToProps = (state) => {
  return{
    state
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
  }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

---

请查找附件以供参考

状态中存在承诺，因为还原程序返回的是承诺，而不是已解析的数据。为了满足您的需求，应该在异步操作完成并解析数据之后调用reducer。因此，您可能希望将HTTP请求从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;

const mapStateToProps = (state) => {
    return{
        state
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
    }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

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

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

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;

const mapStateToProps = (state) => {
  return{
    state
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
  }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

由于异步操作现在在action creator中被隔离，因此简化了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;

const mapStateToProps = (state) => {
    return{
        state
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
    }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

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

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

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;

const mapStateToProps = (state) => {
  return{
    state
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
  }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

最后一件事是让组件调用动作创建者（不要忘记将其导入组件）：

personal detail.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;

const mapStateToProps = (state) => {
    return{
        state
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onGetPersonalDetail: () => dispatch({type: GET_PERSONAL_DETAIL})
    }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

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

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

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;

const mapStateToProps = (state) => {
  return{
    state
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    onGetPersonalDetail: () => dispatch(fetchPersonalDetail())
  }
}
export default connect(mapStateToProps, mapDispatchToProps) (TutorPersonalDetail);

---

我通常不将HTTP调用包含在我的还原程序中。记住，reducer都是同步调用，所以处理这个问题的一个好方法是在thunk操作中。以下是一个例子：

/**请注意，这些操作是私有的。未导出到组件*/
const getPersonalDetailStart=（）=>{
返回{
类型：获取\u个人\u详细信息\u开始
};
};
const getPersonalDetailSuccess=（配置文件）=>{
返回{
类型：获取个人详细信息成功，
轮廓
}
};
const getPersonalDetailFailure=（错误）=>{
返回{
类型：获取个人详细信息失败，
错误
};
};
/**下面是组件可用的thunk操作*/
导出常量getPersonalDetail=（）=>（分派）=>{
//例如，显示装载指示器的启动动作
调度（getPersonalDetailStart（））；
//把承诺还给我
返回BackendAPI.getPersonalDetail（）。然后(
//一旦成功，就要采取成功的行动。
response=>dispatch（getPersonalDetailSuccess（response.data.profile）），
//出现故障时，触发故障操作，例如向用户显示错误消息
error=>dispatch（getPersonalDetailFailure（错误））
);
};

现在，在减速器上，只需以同步操作发生的相同方式处理操作

export const personalReducer=（状态、操作）=>{
开关（动作类型）{
案例获取\个人\详细信息\开始：
返回{
状态
孤岛加载：正确
};
案例获取\个人\详细信息\成功：
返回{
状态
孤岛加载：false，
简介：action.profile
};
案例获取\个人\详细信息\失败：
返回{
状态
孤岛加载：false，
错误：错误
};
违约：
返回状态；
}
}; 

组件中的演示可以如下所示：

import React，{Component，Fragment}来自'React'；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“/actions/your_actions”导入{getPersonalDetail}；
导出默认类DemoComponent扩展组件{
componentDidMount（）{
const{getPersonalDetail}=this.props；
getPersonalDetail（）；
}
render（）{
在这里返回您的html；
}
}
const mapDispatchToProps=（调度）=>{
返回bindActionCreators（{getPersonalDetail}，dispatch）；
};
DemoComponent=connect（null，mapDispatchToProps）（DemoComponent）；

我明白你的意思，但是组件呢？我应该这样发送吗

const mapDispatchToProps=（dispatch）=>{return{onGetPersonalDetail:（）=>dispatch（{getPersonalDetail}}}}

与@MuhammadOwais完全一样。我刚刚用一个演示组件编辑了我的答案，所以你可以检查一下。太好了，谢谢你能确认一下，我如何打印数据

console.log（this.props.onGetPersonalDetail.data）

当我试图access@MuhammadOwais为了访问组件中的数据，您应该使用由

mapstatetops

函数返回的对象中定义的属性。因此，应该可以通过

console.log（this.props.state）将数据记录到console