title: reduxjs/toolkit async Thunk
body: <p>Hi folks I am new to React just learning reduxjs/toolkit for application state management. I have created simple application for handling posts. Currently what I am doing is loading list of posts using async Thunk called fetchPosts. My async thunk is being called twice on application load and I have literally no idea what is making to do so. I am using react version 18.2.0 and here is my post slice.</p>
  <pre><code>import { createAsyncThunk, createSlice, nanoid } from &quot;@reduxjs/toolkit&quot;;
  import {sub} from 'date-fns';
  import axios from 'axios';
  
  const POST_URL = 'http://jsonplaceholder.typicode.com/posts';
  
  
  const initialState = {
     posts : [],
     status : 'idle',
     error : null     
   };
  
  export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () =&gt; {
  
  const response = await axios.get(POST_URL);
  return response.data;
  });
  
  const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers:{
      postAdded: {
          reducer(state, action) {
          state.posts.push(action.payload);
          },
          prepare(title,content, userId){
              return {
                  payload:{
                      id: nanoid(),
                      title,
                      content,
                      userId,
                      date: new Date().toISOString(),
                      reactions: {
                          thumbsUp: 0,
                          wow:0,
                          heart:0,
                          rocket:0,
                          coffee:0
                      }
                  }
              }
          }
      },
      reactionAdded(state, action) {
          const {postId, reaction} = action.payload;
          const existingPost = state.posts.find(post =&gt; post.id === postId);
          if (existingPost) {
              existingPost.reactions[reaction]++;
          }
      }
  },
  extraReducers(builder){
      builder.addCase(fetchPosts.pending, (state, action) =&gt; {
          state.status = 'loading';
          
      })
      .addCase(fetchPosts.fulfilled, (state, action) =&gt; {
          state.status = 'succeeded';
          let min = 1;
          const loadedPosts = action.payload.map(post =&gt; 
              {
                  post.date = sub(new Date(), {minutes: min++}).toISOString();
                  post.reactions = {
                      thumbsUp: 0,
                      wow: 0,
                      heart:0,
                      rocket:0,
                      coffee:0
                  }
                  return post;
              });
          state.posts = loadedPosts;
      })
      .addCase(fetchPosts.rejected, (state, action) =&gt; {
          state.status = 'failed';
          state.error = action.error.message
      })
  }
  });
  
  export const {postAdded,reactionAdded} = postsSlice.actions;
  export const selectAllPosts = (state) =&gt; state.posts.posts;
  export const getPostsStatus = (state) =&gt; state.posts.status;
  export const getPostsError = (state) =&gt; state.posts.error;
  export default postsSlice.reducer;
  </code></pre>
  <p>And here is my Post list component.</p>
  <pre><code>import React from 'react'
  import { useSelector, useDispatch } from 'react-redux';
  import { selectAllPosts, getPostsError, getPostsStatus, fetchPosts } from './postsSlice';
  import { useEffect } from 'react';
  import PostExcerpt from './PostExcerpt';
  const PostsList = () =&gt; {
  const dispatch = useDispatch();
  
  const posts = useSelector(selectAllPosts);
  const postStatus = useSelector(getPostsStatus);
  const postError = useSelector(getPostsError);
  
  
  useEffect(() =&gt; {
  console.log('post status: ', postStatus);
    if(postStatus === 'idle')
    {
      dispatch(fetchPosts());
    }
  },[postStatus])
  
  let content;
  if(postStatus === 'loading'){
  console.log('loading');
  content = &lt;p&gt;&quot;Loading...&quot;&lt;/p&gt;
  }
  else if(postStatus === 'succeeded'){
  console.log('succeded');
  const orderedPosts = posts.slice().sort((a,b) =&gt; b.date.localeCompare(a.date));
  content = orderedPosts.map(post =&gt; &lt;PostExcerpt key={post.id} post={post}/&gt;);
  }
  else if (postStatus === 'failed'){
  content = &lt;p&gt;{postError}&lt;/p&gt;;
  }
  
  return (
  &lt;section&gt;
  &lt;h2&gt;Posts&lt;/h2&gt;
  {content}
  &lt;/section&gt;
  );
   }
   export default PostsList
  </code></pre>