title: My component function is not re-rendering after state change even that I matched the state, returned new state and connected the component,
body: <p>I was looking into this problem in similar posts but I just can't figure it out and I kinda need an advice. So basically my functional component is not re running after I returned a new state from the reducer. The reducer looks like this:</p>
  <pre><code>export interface ProductsTableState {
    products: Product[];
    isLoading: boolean;
  }
  
  const initialState: ProductsTableState = {
    products: [],
    isLoading: false,
  };
  
  export const ProductsTableReducer = (
    state = initialState,
    action: ProductsTableActionsInterface
  ): ProductsTableState =&gt; {
    switch (action.type) {
      case ProductsTableActionsEnum.GET_ALL_PRODUCTS_REQUEST:
        // CONSOLE LOG
        console.log(&quot;Request in REDUCER&quot;);
        return {
          ...state,
          isLoading: true,
        };
      case ProductsTableActionsEnum.GET_ALL_PRODUCTS_SUCCESS:
        console.log(&quot;Success in reducer&quot;);
        return {
          ...state,
          products: action.payload,
          isLoading: false,
        };
      default:
        return state;
    }
  };
  </code></pre>
  <p>And in the second case state, I get the message in console, so there is running.
  So in the reducer I think I returned a NEW state so the change should be visible by the connection. Because reading I saw multiple problems that if you modify the current state it will not be detected so you need to return a new one.</p>
  <p>For the saga and store the code looks like this:
  Saga:</p>
  <pre><code>function* getAllProductsAsync() {
    try {
      const result: Product[] = yield call(() =&gt; getProducts());
      // CONSOLE LOG
      console.log(&quot;SAGA&quot;);
      console.log(result);
  
      yield put(getAllProductsSuccess(result));
    } catch (err) {
      yield put(getAllProductsError());
    }
  }
  
  export function* watchGetAllProductsAsync() {
    yield takeEvery(
      ProductsTableActionsEnum.GET_ALL_PRODUCTS_REQUEST,
      getAllProductsAsync
    );
  }
  </code></pre>
  <p>And store :</p>
  <pre><code>const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  
  const sagaMiddleware = createSagaMiddleware();
  
  export const store = createStore(
    ProductsTableReducer,
    composeEnhancers(applyMiddleware(sagaMiddleware))
  );
  
  sagaMiddleware.run(watchGetAllProductsAsync);
  
  export interface AppState {
    products: ProductsTableState;
  }
  </code></pre>
  <p>And the most important  I think its the functional component where I have the problem. Mostly is a Redux - Axios React app. So what is actually happening is that when I firstly load the page, I get nothing on it. If I comment a line here and save the page reload with my products, because at the second render the products are viseble in the state. As far as I could figure it out I think my problem should be with the mapStateWithProps and the connect but it looks fine for me.</p>
  <pre><code>interface ProductsTableProps {
    products: Product[];
    isLoading: boolean;
  }
  
  export const TableProducts = (props: ProductsTableProps) =&gt; {
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(getAllProductsRequest());
    }, []);
  
    // CONSOLE LOG
    console.log(store.getState().products);
  
    // CONSOLE LOG
    console.log(props.products);
  
    const classes = useStyles();
    const items = store.getState().products.map((product) =&gt; (
      &lt;tr className={classes.trStyle}&gt;
        &lt;td className={classes.thtdStyle}&gt;{product.productCategoryDto.name}&lt;/td&gt;
        &lt;td className={classes.thtdStyle}&gt;{product.name}&lt;/td&gt;
        &lt;td className={classes.thtdStyle}&gt;{product.price}&lt;/td&gt;
        &lt;td key={product.id}&gt;
          &lt;Link to={{ pathname: `/product/${product.id}`, state: { product } }}&gt;
            &lt;IconButton className={classes.buttonStyle}&gt;
              &lt;InfoIcon /&gt;
            &lt;/IconButton&gt;
          &lt;/Link&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    ));
  
    return (
      &lt;table className={classes.tableStyle}&gt;
        &lt;thead className={classes.theadStyle}&gt;
          &lt;tr&gt;
            &lt;th className={classes.thtdStyle}&gt;Category&lt;/th&gt;
            &lt;th className={classes.thtdStyle}&gt;Name&lt;/th&gt;
            &lt;th className={classes.thtdStyle}&gt;Price&lt;/th&gt;
            &lt;th className={classes.thtdStyle}&gt;Description&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody className={classes.trStyle}&gt;{items}&lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  const mapStateToProps = (state: AppState) =&gt; ({
    products: state.products.products,
    isLoading: state.products.isLoading,
  });
  
  const mapDispatchToProps = (dispatch: Dispatch) =&gt; ({
    getAllProd: () =&gt; dispatch(getAllProductsRequest()),
    getAllProdSuccess: (products: Product[]) =&gt;
      dispatch(getAllProductsSuccess(products)),
  });
  
  export default connect(mapStateToProps, {
    getAllProductsRequest,
    getAllProductsSuccess,
  })(TableProducts);
  </code></pre>