Question

我正在学习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;
},

}

我的Endpoint 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，以inifnite循环的方式解决。

最奇怪的是，此操作与我的其他操作一样完成，所以我找不到问题所在。

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

Answer 1

好吧，这是我的错误。我正在更改减速机的加载状态。所以每次加载变为false-> true。我的组件再次渲染，因此再次调用并一次又一次地获取相同的数据。

我修复了这个问题，只是为我的新提取创建了另一个inistialState加载器。

仅供参考...

使用Redux Toolkit进行分派时的无限循环

1 个答案: