title: State Redux is not mapped to props
body: <p>I am struggling with mapping state to props in React Redux. I want to fetch the data from Rest API, at the end my store should have 2 arrays of probands and slides, but I don't really get it, why my slides array is empty. Here are my files:</p>
  <ol>
  <li>TestComponentRedux.js</li>
  </ol>
  <pre><code>import React, { Component, useRef, useEffect } from &quot;react&quot;;
  import &quot;../../Timeline/styles.css&quot;;
  import TimelineComponentRedux from &quot;../../Timeline/TimelineComponentRedux&quot;;
  
  import {
    fetchProbands,
    fetchProbandsWithEvents,
  } from &quot;../../../../store/actions/probands_action&quot;;
  
  import { getStudyResults } from &quot;../../../../Service/Api/Endpoints/Endpoints&quot;;
  import { getStudiesResults } from &quot;../../../../Service/Api/Results&quot;;
  import { connect } from &quot;react-redux&quot;;
  
  class TestComponentRedux extends Component {
    constructor(props) {
      super(props);
      this.state = {
        probands: props.probands,
        slides: props.slides,
      };
    }
  
    render() {
      console.log(&quot;state of TestComponent Redux: &quot;, this.state);
      return (
        &lt;h1&gt;Hello World&lt;/h1&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    console.log(&quot;redux state: &quot;, state);
    return {
      probands: state.probands_reducer.probands,
      slides: state.probands_reducer.slides,
    };
  };
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      fetchProbandsWithEvents: () =&gt; dispatch(fetchProbandsWithEvents),
      fetchProbands: () =&gt; dispatch(fetchProbands),
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(TestComponentRedux);
  
  </code></pre>
  <ol start="2">
  <li>Proband_reducer.js</li>
  </ol>
  <pre><code>import { LOADPROBAND, LOAD_PROBANDWITHEVENTS } from &quot;../../actions&quot;;
  
  const initialStudies = {
    probands: [],
    slides: [],
  };
  
  const probands_reducer = (state = initialStudies, action) =&gt; {
    switch (action.type) {
      case LOADPROBAND:
        return {
          ...state,
          probands: action.payload,
        };
      case LOAD_PROBANDWITHEVENTS:
        return {
          ...state,
          slides: action.payload,
        };
  
      default:
        return state;
    }
  };
  
  export default probands_reducer;
  
  </code></pre>
  <ol start="3">
  <li>actions.js</li>
  </ol>
  <pre><code>export const LOADPROBAND = &quot;LOADPROBAND&quot;;
  export const LOAD_PROBANDWITHEVENTS = &quot;LOAD_PROBANDWITHEVENTS&quot;;
  
  </code></pre>
  <ol start="4">
  <li>proband_actions.js</li>
  </ol>
  <pre><code>import { LOADPROBAND, LOAD_PROBANDWITHEVENTS } from &quot;../actions&quot;;
  
  import { getProbands, getProbandsWithEvents } from &quot;../../Service/Api/Probands&quot;;
  
  import header from &quot;../../Service/Api/Endpoints/HeaderRequest&quot;;
  
  const axios = require(&quot;axios&quot;);
  
  export const fetchProbands = () =&gt; {
    return async (dispatch) =&gt; {
      var probandList = await getProbands();
      if (probandList)
        dispatch({
          type: LOADPROBAND,
          payload: probandList.data._embedded.probands,
        });
    };
  };
  
  export const fetchProbandsWithEvents = () =&gt; {
    return async (dispatch) =&gt; {
      var probandWithEventsList = await getProbandsWithEvents();
      if (probandWithEventsList)
        dispatch({
          type: LOAD_PROBANDWITHEVENTS,
          payload: probandWithEventsList.slides,
        });
    };
  };
  
  </code></pre>
  <ol start="5">
  <li>Probands.js</li>
  </ol>
  <pre><code>import { probands_url, probands_with_events_url } from &quot;./Endpoints/Endpoints&quot;;
  
  import header from &quot;./Endpoints/HeaderRequest&quot;;
  
  import axios from &quot;axios&quot;;
  
  export var getProbands = async function () {
    try {
      let res = await axios.get(probands_url, {
        headers: header,
      });
      return res;
    } catch (e) {
      return false;
    }
  };
  
  export var getProbandsWithEvents = async function () {
    try {
      let res1 = await axios.get(probands_with_events_url, {
        headers: header,
      });
      return res1;
    } catch (e) {
      return false;
    }
  };
  </code></pre>
  <ol start="6">
  <li>Endpoints.js</li>
  </ol>
  <pre><code>export const base_url =
    &quot;http://&quot; + window.location.hostname + &quot;:&quot; + process.env.REACT_APP_CLIENT_ID;
  
  export const sign_in = `${base_url}/auth/signin`;
  
  export const probands_url = `${base_url}/api/config/probands`;
  
  export const probands_with_events_url = `${base_url}/api/config/getAllProbandEventsProSlide`;
  </code></pre>
  <p>So <strong>probands</strong> array receives the data from <strong>probands_url</strong> and <strong>slides</strong> array receives the data from <strong>probands_with_events_url</strong></p>
  <p>The probands array is updated but the slides array is empty.</p>
  <p><strong>State of store</strong></p>
  <p><a href="https://i.stack.imgur.com/i30Vm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i30Vm.png" alt="state of store " /></a></p>
  <p><strong>Slides array data</strong></p>
  <p><a href="https://i.stack.imgur.com/kYhJH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYhJH.png" alt="slides data" /></a></p>
  <p><strong>Probands array data</strong>
  <a href="https://i.stack.imgur.com/9aoX3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9aoX3.png" alt="enter image description here" /></a></p>