Двойной рендер React Redux
При рендере компонента запрос делается два раза и из-за этого получаю при пагинации одинаковые карточки Что с этим делать? В чем может быть проблема?
Использую React и Redux
export const fetchCars = createAsyncThunk(
"cars/fetchAll",
async (page, {rejectWithValue}) => {
try {
const url = new URL('https://6542095af0b8287df1ff5f9e.mockapi.io/Adverts');
url.searchParams.append('p', page);
url.searchParams.append('l', 12);
const response = await axios.get(url);
return response.data;
} catch (e) {
return rejectWithValue(e.message);
}
}
);
const handlePending = state => {
state.isLoading = true;
};
const handleRejected = (state, action) => {
state.isLoading = false;
state.error = action.payload;
};
const carsSlice = createSlice({
name: 'cars',
initialState: {
items: [],
isLoading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchCars.pending, handlePending)
.addCase(fetchCars.rejected, handleRejected)
.addCase(fetchCars.fulfilled, (state, action) => {
state.isLoading = false;
state.error = null;
state.items = [...state.items, ...action.payload];
});
},
},
);