State Redux is not mapped to props

Question

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:

1. TestComponentRedux.js

import React, { Component, useRef, useEffect } from "react";
import "../../Timeline/styles.css";
import TimelineComponentRedux from "../../Timeline/TimelineComponentRedux";

import {
  fetchProbands,
  fetchProbandsWithEvents,
} from "../../../../store/actions/probands_action";

import { getStudyResults } from "../../../../Service/Api/Endpoints/Endpoints";
import { getStudiesResults } from "../../../../Service/Api/Results";
import { connect } from "react-redux";

class TestComponentRedux extends Component {
  constructor(props) {
    super(props);
    this.state = {
      probands: props.probands,
      slides: props.slides,
    };
  }

  render() {
    console.log("state of TestComponent Redux: ", this.state);
    return (
      <h1>Hello World</h1>
    );
  }
}

const mapStateToProps = (state) => {
  console.log("redux state: ", state);
  return {
    probands: state.probands_reducer.probands,
    slides: state.probands_reducer.slides,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    fetchProbandsWithEvents: () => dispatch(fetchProbandsWithEvents),
    fetchProbands: () => dispatch(fetchProbands),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TestComponentRedux);

2. Proband_reducer.js

import { LOADPROBAND, LOAD_PROBANDWITHEVENTS } from "../../actions";

const initialStudies = {
  probands: [],
  slides: [],
};

const probands_reducer = (state = initialStudies, action) => {
  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;

3. actions.js

export const LOADPROBAND = "LOADPROBAND";
export const LOAD_PROBANDWITHEVENTS = "LOAD_PROBANDWITHEVENTS";

4. proband_actions.js

import { LOADPROBAND, LOAD_PROBANDWITHEVENTS } from "../actions";

import { getProbands, getProbandsWithEvents } from "../../Service/Api/Probands";

import header from "../../Service/Api/Endpoints/HeaderRequest";

const axios = require("axios");

export const fetchProbands = () => {
  return async (dispatch) => {
    var probandList = await getProbands();
    if (probandList)
      dispatch({
        type: LOADPROBAND,
        payload: probandList.data._embedded.probands,
      });
  };
};

export const fetchProbandsWithEvents = () => {
  return async (dispatch) => {
    var probandWithEventsList = await getProbandsWithEvents();
    if (probandWithEventsList)
      dispatch({
        type: LOAD_PROBANDWITHEVENTS,
        payload: probandWithEventsList.slides,
      });
  };
};

5. Probands.js

import { probands_url, probands_with_events_url } from "./Endpoints/Endpoints";

import header from "./Endpoints/HeaderRequest";

import axios from "axios";

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;
  }
};

6. Endpoints.js

export const base_url =
  "http://" + window.location.hostname + ":" + 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`;

So probands array receives the data from probands_url and slides array receives the data from probands_with_events_url

The probands array is updated but the slides array is empty.

State of store

Slides array data

Probands array data

Answer 1

It should be probandWithEventsList.data . Please check below and do aconsole.log and see what data are you getting from API.

export const fetchProbandsWithEvents = () => {
      return async (dispatch) => {
        var probandWithEventsList = await getProbandsWithEvents();
       // Do console.log(probandWithEventsList.data) only pass the 
         information needed for payload.
        if (probandWithEventsList)
          dispatch({
            type: LOAD_PROBANDWITHEVENTS,
            payload: probandWithEventsList.data,
          });
      };
    };