Tengo esta aplicación que usa el primer createAsyncThunk para obtener la primera página de la API, luego quiero que el segundo createAsyncThunk , que obtiene la página siguiente, se active cuando el usuario llegue al final de la página y obtenga los datos en el desplazamiento infinito método.
// Gets the First 10 Posts from the API export const getPosts = createAsyncThunk( "post/getPosts", async (apiAddress) => { const response = await fetch(apiAddress); if (!response.ok) throw new Error("Request Failed!"); const data = await response.json(); return data; } ); // Loads the Next 10 Posts export const getMorePosts = createAsyncThunk( "post/getMorePosts", async (apiAddress) => { const response = await fetch(apiAddress); if (!response.ok) throw new Error("Request Failed!"); const data = await response.json(); return data; } ); const redditPostSlice = createSlice({ name: "post", initialState: { redditPost: {}, isLoading: false, hasError: false, moreIsLoading: false, moreHasError: false, }, extraReducers: (builder) => { builder .addCase(getPosts.pending, (state) => { state.isLoading = true; state.hasError = false; }) .addCase(getPosts.fulfilled, (state, action) => { state.redditPost = action.payload.data; state.isLoading = false; state.hasError = false; }) .addCase(getPosts.rejected, (state) => { state.isLoading = false; state.hasError = true; }) .addCase(getMorePosts.pending, (state) => { state.moreIsLoading = true; state.moreHasError = false; }) .addCase(getMorePosts.fulfilled, (state, action) => { state.redditPost = action.payload.data; state.moreIsLoading = false; state.moreHasError = false; }) .addCase(getMorePosts.rejected, (state) => { state.moreIsLoading = false; state.moreHasError = true; }); }, });Mi problema es que el estado de la aplicación cambia a la segunda página y el contenido de la primera página desaparece.
Sé que mi problema está aquí state.redditPost = action.payload.data pero no sé cómo puedo agregar este nuevo estado al anterior.
Llevo horas con esto y ya no se que hacer.
¿Hay alguna forma de agregar el nuevo estado al estado anterior?
Asumiría que los datos de carga útil tienen una matriz de niños. Como este ejemplo de respuesta encontrado en línea:
{ kind: "Listing", data: { ... children: [ {kind: "t3", data: {...}} {kind: "t3", data: {...}} {kind: "t3", data: {...}} ... ] ... } } Por lo tanto, debe hacer que redditPost sea una matriz. También semánticamente debería ser redditPosts para denotar matriz.
initialState: { redditPost: {}, ...y luego, cuando lo actualice, una de las formas más fáciles es usar la extensión ES6
state.redditPost = { ...state.redditPost, after: action.payload.data.after, children: [ ...state.redditPost.children, ...action.payload.data.children ] }