Question

我正在尝试使用axios和React Saga发送GET请求。该请求被触发了两次

这是我的组件文件，我在其中调用getBusinessHoursList操作：

import { getBusinessHoursList } from "../../../../redux/actions";
...
...
componentDidMount() {
    this.props.getBusinessHoursList(this.state.id);  
 }
...
...
const mapStateToProps = ({ settings }) => {
    return {
        settings
    };
};

export default connect(
    mapStateToProps,
    {
        getBusinessHoursList,
    }
  )(injectIntl(BusinessHours));

这是我使用axios获取营业时间列表的服务文件： setting-service.js：

import axios from '../util/api';
import { configureStore } from '../redux/store';
export const settingsService = 
{
  getBusinessHours,
};

function getBusinessHours() {
  const store = configureStore({});
  const user = JSON.parse(store.getState().authUser.user)
  return axios.get("business/" + user.business.id + "/businesshours")
  .then(response => {
      return response.data.data
  }).catch(error => {
      return error.response.data
  })
}

这是动作文件，我在其中定义动作 actions.js：

import {
    CHANGE_LOCALE, 
    SETTING_GET_BUSINESS_HOURS_FAIL,
    SETTING_GET_BUSINESS_HOURS_SUCCESS,
    SETTING_GET_BUSINESS_HOURS,
} from '../actions';

export const getBusinessHoursList = (data) => ({
    type: SETTING_GET_BUSINESS_HOURS,
    payload: data
});

export const getBusinessHoursSuccess = (items) => ({
    type: SETTING_GET_BUSINESS_HOURS_SUCCESS,
    payload: items
});

export const getBusinessHoursFail = (error) => ({
    type: SETTING_GET_BUSINESS_HOURS_FAIL,
    payload: error
});

reducer.js

import {
    CHANGE_LOCALE,
    SETTING_GET_BUSINESS_HOURS,
    SETTING_GET_BUSINESS_HOURS_FAIL,
    SETTING_GET_BUSINESS_HOURS_SUCCESS
} from '../actions';

const INIT_STATE = {
    errors: '',
    loadingBH: false,
    businessHoursItems: null
};

export default (state = INIT_STATE, action) => {
    switch (action.type) {

        case SETTING_GET_BUSINESS_HOURS:
            return { ...state, loadingBH: false };

        case SETTING_GET_BUSINESS_HOURS_SUCCESS:
            return { ...state, loadingBH: true, businessHoursItems: action.payload};

        case SETTING_GET_BUSINESS_HOURS_FAIL:
            return { ...state, loadingBH: true, errors: action.payload };

        default: return { ...state };
    }
}

saga.js：

import { all, call, fork, put, takeEvery, takeLatest, take } from "redux-saga/effects";
import { getDateWithFormat } from "../../helpers/Utils";
import { settingsService } from '../../services/settings-service'

import {
  SETTING_GET_BUSINESS_HOURS,
  SETTING_UPDATE_BUSINESS_HOURS,
} from "../actions";

import axios from "../../util/api";

import { NotificationManager } from "../../components/common/react-notifications";

import {
  getBusinessHoursSuccess,
  getBusinessHoursFail,
} from "./actions";



const getServiceListRequest = async () =>
await settingsService.getBusinessHours()
.then(authUser => authUser)
.catch(error => error);

function* getBusinessHours() {
  console.log('test')
  try {
    const response = yield call(getServiceListRequest);
    yield put(getBusinessHoursSuccess(response));
  } catch (error) {
    yield put(getBusinessHoursFail(error));
  }
}

export function* watchGetBusinessHours() {
  yield takeLatest(SETTING_GET_BUSINESS_HOURS, getBusinessHours);
}

export default function* rootSaga() {
  yield all([
    fork(watchGetBusinessHours), 
  ]);
}

全局sagas文件：sagas.js：

import { all } from 'redux-saga/effects';
import authSagas from './auth/saga';
import settingsSagas from './settings/saga';

export default function* rootSaga(getState) {
  yield all([
    authSagas(),
    settingsSagas(),
  ]);
}

请求成功触发，我获得了营业时间列表，但请求两次触发我试图用takeLatest代替takeEvery

这是“网络”标签

使用React Saga时Axios请求发送了两次

0 个答案: