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

Question

我正在尝试通过向 api 发送获取请求来获取数据，我正在获取数据，但它在承诺对象中，

我尝试了几种技术来解决这个问题，但我无法解决问题。

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;

组件：个人-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

状态中有一个承诺，因为减速器 returns 是一个承诺而不是已解析的数据。为了满足您的要求，应在完成异步操作并解析数据后调用 reducer。因此，您可能希望将 HTTP 请求从 reducer 移至 action creator，并在数据解析后立即调度相应的 action。

通常动作创建者保存在一个单独的文件中，例如

个人详细信息-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);
  });
}

由于异步操作现在在 action creator 中被隔离，reducer 得到简化：

个人详细信息-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;

最后要做的是让组件调用 action creator（不要忘记将其导入到组件中）：

个人-detail.js

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

Answer 2

我通常不在我的减速器中包含 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);

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

Returning promise object on GET API request by Redux and Axios

javascript

reactjs

redux

redux-thunk

axios