title: React Redux is not updating component state in real time
body: <p>I have one component <code>ImageGallery</code>, in there I want to load more images after pressing <code>Load More</code> button. And, <code>loadMore()</code> function updates a react-redux <code>globalState.js</code> initialState value <code>limit</code>. But, When I am pressing <code>Load More</code> button I have to press 2 times for the first time to get the first <code>16</code> images. After that it's updating value as expected. But, first time I have to press <code>2</code> times. But, I want, it will work on first time  click and get <code>16</code> items and so on.</p>
  <p><code>globalState.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>export const globalState = createSlice({
    name: &quot;global&quot;,
    initialState: {
    limit: 8
    }
    reducers: {
      // imageGallery
      incrementLimitGallery: (state) =&gt; {
        state.limit += 8;
      },
     },
  });
  </code></pre>
  <p>Component <code>ImageGallery.jsx</code>:</p>
  <pre class="lang-js prettyprint-override"><code>let API = &quot;https://www.example.com/images/&quot;;
  
  export default function ImageGallery() {
    const dispatch = useDispatch();
    const limit = useSelector((state) =&gt; state.global.limit);
    const [images, setimages] = useState(null);
  
    async function fetchImages() {
      const response = await axios.get(API + limit);
      if (&quot;error&quot; in response.data) {
        setimages(null);
      } else {
        setimages(response.data);
      }
    }
  
    const loadMore = async () =&gt; {
      dispatch(incrementLimitGallery());
      await fetchImages();
    };
  
    return (
      &lt;&gt;
       //implementation of image gallery, long code so hide it
        &lt;div&gt;{images ? (imgaes.map(image =&gt; (.......))): null}&lt;/div&gt;
  
        &lt;div&gt;
          &lt;button onClick={() =&gt; loadMore()}&gt;Load More&lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>