在 React Redux Saga api 中被多次循环调用

Question

我在 redux saga 中获取记录时遇到了奇怪的行为。当我尝试从 class 调用 useEffect 中的操作时，它在循环中被多次调用。因此，有无限次 api 调用。

谁能告诉我哪里错了？以下是我的代码。

减速器

// @flow
import {
    FETCH_DOCTOR_PROFILE,
    FETCH_DOCTOR_PROFILE_SUCCESS,
    FETCH_DOCTOR_PROFILE_ERROR
} from "./actionTypes";

const INIT_STATE = {
    error: null,
    isLoading: false,
    doctorProfile: {}
};

const DoctorProfileReducer = (state = INIT_STATE, action) => {
    switch (action.type) {
        case FETCH_DOCTOR_PROFILE:
            return {
                ...state,
                isLoading: true
            };
        case FETCH_DOCTOR_PROFILE_SUCCESS:
            return {
                ...state,
                isLoading: false,
                doctorProfile: action.payload
            };
        case FETCH_DOCTOR_PROFILE_ERROR:
            return {
                ...state,
                isLoading: false,
                error: action.error
            };
        default:
            return state;
    }
};

export default DoctorProfileReducer;

动作

import {
    FETCH_DOCTOR_PROFILE,
    FETCH_DOCTOR_PROFILE_SUCCESS,
    FETCH_DOCTOR_PROFILE_ERROR
} from "./actionTypes";

export const fetchDoctorProfileAction= () => ({
    type: FETCH_DOCTOR_PROFILE
});

export const fetchDoctorProfileSuccessAction= (doctorProfile) => ({
    type: FETCH_DOCTOR_PROFILE_SUCCESS,
    payload: doctorProfile
});

export const fetchDoctorProfileErrorAction= (error) => ({
    type: FETCH_DOCTOR_PROFILE_ERROR,
    error: error
});

传奇

import { takeEvery, fork, put, all, call } from 'redux-saga/effects';

// Redux States
import { FETCH_DOCTOR_PROFILE } from './actionTypes';
import { fetchDoctorProfileSuccessAction, fetchDoctorProfileErrorAction } from './actions';
import { fetchDoctorProfileApi } from '../../../services/doctorProfile';

import {FETCH_DOCTOR_PROFILE_URL} from '../../../helpers/urls';

function* fetchDoctorProfileSaga() {
    try {
        const response = yield call(fetchDoctorProfileApi,FETCH_DOCTOR_PROFILE_URL);
        yield put(fetchDoctorProfileSuccessAction(response));
    } catch (error) {
        yield put(fetchDoctorProfileErrorAction(error));
    }
}

export function* watchFetchDoctorProfile() {
    yield takeEvery(FETCH_DOCTOR_PROFILE, fetchDoctorProfileSaga)
}

function* doctorProfileSaga() {
    yield all([
        fork(watchFetchDoctorProfile),
    ]);
}

export default doctorProfileSaga;

调用页面

useEffect(() => {
        props.fetchDoctorProfileAction();
        const result = props.doctorProfile;
    });

...........

const mapStateToProps = (state) => {
    const { error, doctorProfile, pending } = state.DoctorProfileReducer;
    return { error , doctorProfile, pending };
}

export default withRouter(connect(mapStateToProps, {fetchDoctorProfileAction})(ProfessionalProfilePrimary));

Answer 1

我认为您需要在 useEffect() 挂钩中添加一个条件：

useEffect(() => {
  if (!props.doctorProfile && !props.pending) {
    props.fetchDoctorProfileAction();
  }
  
  const result = props.doctorProfile;
}, [props.doctorProfile, props.pending]);

注意： 在您的组件 mapStateToProps 中您有 pending 但在您的商店中您有 isLoading；确保你正确地将状态映射到道具 ;)

在 React Redux Saga api 中被多次循环调用

In React Redux Saga api is being called multiple time in loop

javascript

api

reactjs

redux

redux-saga