Redux和Axios在GET API请求上返回promise对象

Question

我试图通过向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

Answer 1

我通常不在我的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);

Answer 2

在州有一个承诺，因为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);