title: How to correctly handle loading state in redux toolkit crud
body: <p>I want to know the best way for handling the loading state in redux-toolkit.</p>
  <p>I have this slice and here I can create a post, delete a post, get all posts.
  And as I think, for all these operations I need to handle a loading state. So when the user waits for posts I can show a loader and if he creates a post I want to show a loader to him which indicates that the post is creating.</p>
  <p>That's what I have</p>
  <pre><code>export const posts = createSlice({
    name: &quot;posts&quot;,
    initialState : {posts: [], status: null},
    reducers: {},
    extraReducers: {
      [createPost.pending]: (state, action) =&gt; {
        state.status = &quot;loading&quot;; &lt;==== how to do this.
      },
      [createPost.fulfilled]: (state, action) =&gt; {
        state.status = &quot;success&quot;; &lt;==== how to do this
      },
      [createPost.rejected]: (state, action) =&gt; {
        state.status = &quot;failed&quot;; &lt;==== how to do this
      },
  
      [getPosts.pending]: (state, action) =&gt; {
        state.status = &quot;loading&quot;; &lt;==== how to do this
      },
      [getPosts.fulfilled]: (state, action) =&gt; {
        state.status = &quot;success&quot;; &lt;==== how to do this
        state.posts = action.payload.data;
      },
      [getPosts.rejected]: (state, action) =&gt; {
        state.status = &quot;failed&quot;; &lt;==== how to do this
      },
  
      [deletePost.pending]: (state, action) =&gt; {
        state.status = &quot;loading&quot;; &lt;==== how to do this
      },
      [deletePost.fulfilled]: (state, action) =&gt; {
        state.status = &quot;success&quot;; &lt;==== how to do this
        state.posts = state.posts.filter(el =&gt; el.id !== action.payload);
      },
      [deletePost.rejected]: (state, action) =&gt; {
        state.status = &quot;failed&quot;; &lt;==== how to do this
      }, 
  
      [getPostById.pending]: (state, action) =&gt; {
        state.status = &quot;loading&quot;; &lt;==== how to do this
      },
      [getPostById.fulfilled]: (state, action) =&gt; {
        state.status = &quot;success&quot;; &lt;==== how to do this
        state.post = action.payload;
      },
      [getPostById.rejected]: (state, action) =&gt; {
        state.status = &quot;failed&quot;; &lt;==== how to do this
      },
    },
  });
  </code></pre>
  <p>I can also create two more keys in my initial state for every crud operation like (createLoadingState, deleteLoadingState) but I think that's not right</p>
  <p>I think that I can just make something like this:</p>
  <pre><code>[createPost.pending]: (state, action) =&gt; {
    state.status = &quot;creating_post_loading&quot;;
  },
  [createPost.fulfilled]: (state, action) =&gt; {
    state.status = &quot;creating_post_success&quot;;
  },
  [createPost.rejected]: (state, action) =&gt; {
    state.status = &quot;creating_post_failed&quot;;
  },
  
  
  [getPosts.pending]: (state, action) =&gt; {
    state.status = &quot;get_posts_loading&quot;;
  },
  [getPosts.fulfilled]: (state, action) =&gt; {
    state.status = &quot;get_posts_success&quot;;
    state.posts = action.payload.data;
  },
  [getPosts.rejected]: (state, action) =&gt; {
    state.status = &quot;get_posts_failed&quot;;
  },
  </code></pre>
  <p>BUT then I will have to remember every single name, so this approach seems very bad for me.</p>
  <p>The best idea that came up to my mind is to have this initialState</p>
  <pre><code>const initialState = {
    posts: [],
    loading: null, &lt;==== added
    error: null, &lt;==== added
    selectedPost: {},
  };
  </code></pre>
  <p>and now when I fetch all posts I just write <strong>state.loading = true</strong> BUT in <strong>CREATE POST</strong> I make state.loading = false since I don't want my posts to reload on the page if someone creates the post but in this way, I won't show a loader state for the created post since the loading state is false.</p>
  <p>I can also create separate slices for each operation with its own loadingState but don't know if it is right.</p>
  <p>What I mean, in my react component I check if posts are loading, if so then I show a loader and if not then I will show the fetched data but if I have the same loading state for all my crud operations then whenever the user adds/deletes/updates a post it will trigger the loading state for everything.</p>
  <p>If you have github repos where I can find the best practices, I will be very happy if you can send me those.</p>