How to prevent duplicate execution of redux toolkit dispatch in useEffect in react?

Viewed 38

I'm using the rudux toolkit in react. After rendering the first page, useEffect is executed and the farmloadPost action is executed.

By the way, armloadPost.pending is executed three times. How can I make it run only once? i tried disabled stricmode, but it same this is my code

useEffect(  () => {
    dispatch(farmloadPost());
  }, [dispatch]);



  export const farmloadPost = createAsyncThunk(
    "farm/farmloadPost",
    async (data, { rejectWithValue }) => {
      try {
        const response = await axios.get(api);
        return response.data;
      } catch (error: any) {
        console.log("error:",error);
        return rejectWithValue(error.response.data);
      }
    }
  );



const postSlice = createSlice({
  name: "post",
  initialState,
  reducers: {},
  extraReducers: (builder) =>
    builder

      // loadPost
      .addCase(farmloadPost.pending, (state) => {
        state.farmLoading = true;
        state.farmDone = false;
        state.farmError = null;
      })
      .addCase(farmloadPost.fulfilled, (state, action) => {
        // console.log("action.payload:", action.payload);
        state.farmLoading = false;
        state.farmDone = true;
        state.farm = action.payload;
      })
      .addCase(farmloadPost.rejected, (state, action) => {
        state.farmLoading = false;
        // state.farmDone = action.error.message;
      })

      .addDefaultCase((state) => state),
});

enter image description here

0 Answers
Related