State Redux 未映射到道具

Question

我正在努力將 state 映射到 React Redux 中的道具。 我想從 Rest API 中獲取數據，最后我的商店應該有 2 個 arrays 先證者和幻燈片，但我真的不明白。 這是我的文件：

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. 動作.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. 先證者.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. 端點.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`;

所以probands數組從probands_url接收數據，而slides數組從probands_with_events_url接收數據

先證者數組已更新，但幻燈片數組為空。

商店的State

幻燈片數組數據

先證者陣列數據

Answer 1

它應該是 probandWithEventsList.data。 請檢查下面並執行 aconsole.log 並查看您從 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,
          });
      };
    };