使用 Redux Toolkit 进行调度时的无限循环答案

【问题标题】：Infinite loop on dispatch with Redux Toolkit使用 Redux Toolkit 进行调度时的无限循环
【发布时间】：2021-02-04 18:33:46
【问题描述】：

我正在学习 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 get，然后再次调用 getImageProfessionsStart 解析为无限循环。

最奇怪的是，这个 get 它像我的其他 get 一样完成，所以我找不到问题出在哪里。

PD：我知道在我的减速器中我没有对我的 get 结果做任何事情（目前），但我认为这不是问题所在。

【问题讨论】：

标签： reactjs react-redux axios redux-thunk redux-toolkit

【解决方案1】：

好吧，是我的错。我正在更改减速器的加载状态。所以每次加载都是假的——>真。我的组件再次重新渲染，因此再次调用并一遍又一遍地获取相同的数据。

我修复了它，只是为我的新 fetch 创建了另一个 inistialState 加载器。

仅供参考...

【讨论】：