Бесконечный цикл при отправке с помощью Redux Toolkit

#reactjs #react-redux #axios #redux-thunk #redux-toolkit

#reactjs #реагировать-redux #axios #redux-thunk #redux-toolkit

Вопрос:

Я изучаю React-Toolkit, но я боролся с этим бесконечным циклом. Прежде всего, я вызываю эту выборку из:

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getImageProfession(profession.id, region, token));
  }, []);
  

Затем в моем rootSlice.ts я:

 export const getImageProfession = (id: number, region: string, token: string): AppThunk => async(dispatch) => {
  try {
    dispatch(getImageProfessionsStart());
    const imageData = await getImageProfessionApi(id, region, token);
    dispatch(getImageProfessionsSuccess(imageData));
  } catch (err) {
    dispatch(getImageProfessionsFailure(err));
  }
};
  

Мой CreateSlice:

 export const rootSlice = createSlice({name: 'root',initialState,reducers: {
 getImageProfessionsStart(state) {
  state.loading = true;
},
getImageProfessionsSuccess(state, action: PayloadAction<any>) {
  state.loading = false;
},
getImageProfessionsFailure(state, action: PayloadAction<any>) {
  state.loading = false;
},
  

}

Мой API конечной точки:

 export const getImageProfessionApi = async (id: number, region: string, token: string): Promise<any> => {
const namespace = `namespace=static-${region}`;
const locale = 'en_GB';
const { data: responseData } = await axios.get(
    ${link}
  );

  return responseData.assets[0].value;
};
  

И по какой-то причине, которую я не понимаю, сначала вызывает getImageProfessionsStart, затем выполняет получение axios, а после этого снова вызывает getImageProfessionsStart, разрешающийся как бесконечный цикл.

Самое странное, что это делается так же, как и другие мои, поэтому я не могу найти, в чем проблема.

PD: Я знаю, что в моем редукторе я ничего не делаю с результатом моего get (на данный момент), но я не думаю, что это проблема.

Ответ №1:

Хорошо, это была моя ошибка. Я менял состояние загрузки в своем редукторе. Таким образом, каждый раз, когда загрузка переходит в false —> true. Мой компонент повторно отправляет запросы снова, поэтому он снова вызывает и извлекает одни и те же данные снова и снова.

Я исправил это, просто создав еще один загрузчик inistialState для моей новой выборки.

Просто к вашему сведению…