title: State is null, after useEffect hooks
body: <p>I am trying to set product by dispatching a method in a useEffect. However, state still says null.</p>
  <p>index.html</p>
  <pre><code>import React, { useEffect, Fragment } from &quot;react&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  
  import { fetchProductsData } from &quot;../../store/products-actions&quot;;
  
  import Promotion from &quot;./components/Promotion&quot;;
  import Products from &quot;./components/Products&quot;;
  import ToastUi from &quot;../../shared/ui/ToastUi&quot;;
  
  import { Container, Row, Col } from &quot;react-bootstrap&quot;;
  
  const Home = () =&gt; {
    const dispatch = useDispatch();
  
    // const products = useSelector((state) =&gt; state.products.products);
    const products = useSelector((state) =&gt; state.products.productsTest);
    const cartQuantity = useSelector((state) =&gt; state.cart.quantity);
  
    useEffect(() =&gt; {
      dispatch(fetchProductsData());
    }, [dispatch]);
  
    return (
      &lt;Fragment&gt;
        &lt;ToastUi
          status=&quot;Sukses&quot;
          title=&quot;Notifikasi&quot;
          message={`(${cartQuantity}) produk baru berhasil di masukkan keranjang`}
        /&gt;
        &lt;Container fluid=&quot;xl&quot;&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;Promotion /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;Row className=&quot;mt-3&quot; md={3}&gt;
            &lt;Products products={products} /&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>Products still says null after a cycle, apparently it needs second cycle to make that state changed. Not sure how can I make it change in one cycle. Do I need to put the useEffect in the parent ?</p>
  <p><strong>EDIT</strong>
  if I add this, it will work</p>
  <pre><code> {products !== null &amp;&amp; &lt;Products products={products} /&gt;}
   // {/* &lt;Products products={products} /&gt; */} // 
  </code></pre>
  <p>However, is there a better way or maybe some explanation on why this is happening, Thank you.</p>
  <p><strong>EDIT</strong></p>
  <p>products-slice.js</p>
  <pre><code>import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  import {
    products,
    excel_products,
    product,
    filteredProducts,
    productsTest,
  } from &quot;../datafiles&quot;;
  
  const initialProductsState = {
    products,
    excel_products,
    product,
    filteredProducts,
    productsTest,
  };
  
  const productsSlice = createSlice({
    name: &quot;products&quot;,
    initialState: initialProductsState,
    reducers: {
      viewExcelProducts(state, action) {
        state.excel_products = action.payload;
      },
      uploadExcelProducts(state) {
        if (excel_products.length &lt; 0) {
          console.log(&quot;error&quot;);
        } else {
          const newProducts = state.products.concat(state.excel_products);
          state.products = newProducts;
          state.excel_products = [];
        }
      },
      selectProduct(state, action) {
        const product = state.products.find((item) =&gt; item.id === action.payload);
        state.product = product;
      },
      filterProducts(state, action) {
        const filteredProducts = state.products.filter(
          (item) =&gt; item.type === action.payload
        );
        state.filteredProducts = filteredProducts;
      },
      setProducts(state, action) {
        state.productsTest = action.payload;
      },
    },
  });
  
  export const productsActions = productsSlice.actions;
  export default productsSlice;
  </code></pre>
  <p>products-actions.js</p>
  <pre><code>import { productsActions } from &quot;./products-slice&quot;;
  
  export const fetchProductsData = () =&gt; {
    return async (dispatch) =&gt; {
      const fetchData = async () =&gt; {
        const response = await fetch(&quot;http://localhost:5000/products&quot;);
  
        if (!response.ok) {
          throw new Error(&quot;Could not fetch data!&quot;);
        }
        const data = await response.json();
  
        return data;
      };
      try {
        const productsData = await fetchData();
        dispatch(productsActions.setProducts(productsData));
      } catch (err) {
        console.log(&quot;Error: &quot; + err);
      }
    };
  };
  </code></pre>