將先前狀態追加到Redux中的新狀態 [英] Append Previous State to New State in Redux

問題描述

我有一個應用程序，它使用第一個createAsyncThunk從API獲取第一個頁面，然后我希望第二個createAsyncThunk獲取下一個頁面，在用戶到達頁面底部并以無限滾動的方法獲取數據時觸發。

// 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;
      });
  },
});

我的問題是應用程序的狀態更改為第二頁，第一頁內容消失。

我知道我的問題在這里state.redditPost = action.payload.data，但我不知道如何將此新狀態附加到以前的狀態。

我已經這樣做了幾個小時了，真的不知道該怎么辦了。

有沒有辦法將新狀態追加到以前的狀態？

推薦答案

我假設有效負載數據有一個子數組。如以下在線回復示例所示：

{
   kind: "Listing",
   data: {
      ...
      children: [
          {kind: "t3", data: {...}}
          {kind: "t3", data: {...}}
          {kind: "t3", data: {...}}
          ...
      ]
      ...
   }
}

因此，您需要使redditPost成為一個數組。在語義上也應該是redditPosts來表示數組。

  initialState: {
    redditPost: {},
    ...

然后當您更新它時，最簡單的方法之一是使用ES6排列

state.redditPost = {
    ...state.redditPost,
    after: action.payload.data.after,
    children: [
        ...state.redditPost.children,
        ...action.payload.data.children
    ]
}

這篇關于將先前狀態追加到Redux中的新狀態的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！