如何在 redux toolkit crud

如何解决如何在 redux toolkit crud

我想知道在 redux-toolkit 中处理加载状态的最佳方式。

我有这个切片，在这里我可以创建一个帖子，删除一个帖子，获取所有帖子。我认为，对于所有这些操作，我需要处理加载状态。因此，当用户等待帖子时，我可以显示一个加载程序，如果他创建了一个帖子，我想向他显示一个加载程序，表明该帖子正在创建。

这就是我所拥有的

export const posts = createSlice({
  name: "posts",initialState : {posts: [],status: null},reducers: {},extraReducers: {
    [createPost.pending]: (state,action) => {
      state.status = "loading"; <==== how to do this.
    },[createPost.fulfilled]: (state,action) => {
      state.status = "success"; <==== how to do this
    },[createPost.rejected]: (state,action) => {
      state.status = "Failed"; <==== how to do this
    },[getPosts.pending]: (state,action) => {
      state.status = "loading"; <==== how to do this
    },[getPosts.fulfilled]: (state,action) => {
      state.status = "success"; <==== how to do this
      state.posts = action.payload.data;
    },[getPosts.rejected]: (state,[deletePost.pending]: (state,[deletePost.fulfilled]: (state,action) => {
      state.status = "success"; <==== how to do this
      state.posts = state.posts.filter(el => el.id !== action.payload);
    },[deletePost.rejected]: (state,[getPostById.pending]: (state,[getPostById.fulfilled]: (state,action) => {
      state.status = "success"; <==== how to do this
      state.post = action.payload;
    },[getPostById.rejected]: (state,},});

我还可以在初始状态下为每个 crud 操作（例如 (createLoadingState,deleteLoadingState)）再创建两个键，但我认为这是不对的

我认为我可以做这样的事情：

[createPost.pending]: (state,action) => {
  state.status = "creating_post_loading";
},action) => {
  state.status = "creating_post_success";
},action) => {
  state.status = "creating_post_Failed";
},action) => {
  state.status = "get_posts_loading";
},action) => {
  state.status = "get_posts_success";
  state.posts = action.payload.data;
},action) => {
  state.status = "get_posts_Failed";
},

但是这样我就必须记住每一个名字，所以这种方法对我来说似乎很糟糕。

我想到的最好的想法是拥有这个初始状态

const initialState = {
  posts: [],loading: null,<==== added
  error: null,<==== added
  selectedPost: {},};

现在当我获取所有帖子时，我只写 state.loading = true 但是在 CREATE POST 中我使 state.loading = false 因为我不想要我的如果有人创建了帖子，帖子将重新加载到页面上，但这样一来，由于加载状态为 false，我将不会显示已创建帖子的加载器状态。

我还可以为每个具有自己的加载状态的操作创建单独的切片，但不知道它是否正确。

我的意思是，在我的反应组件中，我检查帖子是否正在加载，如果是，则显示加载器，如果没有，则显示获取的数据，但如果我的所有 crud 操作具有相同的加载状态，那么无论何时用户添加/删除/更新帖子，它将触发所有内容的加载状态。

如果您有 github 存储库，我可以在其中找到最佳实践，如果您能将它们发送给我，我将非常高兴。

解决方法

您要么需要许多不同的加载指示器，要么需要多个切片，这两者都可能需要大量工作。 Redux Toolkit 还包含一个名为“RTK 查询”的数据获取/api 缓存抽象，可以自动执行所有这些操作，因此我建议您阅读有关该内容的文档。

https://redux-toolkit.js.org/rtk-query/overview