React-Redux API Получить запрос действие не выполняется?

Question

Здравствуйте. В настоящее время я использую React-Redux для получения информации из моего Flask API и отображения json на веб-сайте. API работает отлично, но вызываемое действие никогда не выполняется? Я очень плохо знаком с редуксом, поэтому боюсь, что что-то пропустил? мой редуктор отображает информацию, когда предоставлены фиктивные данные, но кажется, что действие не будет выполнено для получения данных? мои данные по умолчанию в моем действии даже не отображаются?

Dashaction. js

import axios from "axios";


export function loadyield(){
    return(dispatch)=>{
        return axios.get("localhost:5000/getallyield"), then ((response) => {
            dispatch(updateyield(response.json));
        })
    }
}


export function updateyield(total){
    return{
        type:"UPDATE_YIELD",
        total: total
    }
}

DashReducer. js

let defaultState={
    total: "No Data"
}

const DashReducer=(state=defaultState,action) =>{
    if(action.type==="UPDATE_YIELD"){
        return{
            ...state,
            total:action.total
            }
        } else{
            return{
                ...state
            }
        }
    }
export default DashReducer;

DashContainer. js

import React, {Component} from 'react'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux'
import dashReducer from '../store/reducers/dashReducer';


class DashContent extends Component {

    render () {
        return(

        <div>
        <h3> Total</h3>
        <p>{this.props.total}</p>
        </div>
        );
    }

}
function mapStatetoProps(state) {
    return state
    };

export default connect(mapStatetoProps) (DashContent);

Панель инструментов. js

import React, {Component} from 'react'
import DashContent from '../containers/dashboardcontainer'
import { Layout, Breadcrumb } from 'antd';
const { Header, Footer, Sider, Content, } = Layout;



class Dashboard extends Component {
    render(){
        return (
        <div className ="dashboard container">
            <DashContent>
            </DashContent>
            </div>
        )
    }
}

export default Dashboard;

Индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware} from 'redux'
import rootReducer from './components/store/reducers/routeReducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(<Provider store = {store}><App /></Provider>, document.getElementById('root'));

Любой совет будет отличным! :)

Answer 1

Похоже, вам просто нужно его использовать.

В DashContainer:

1. Импорт:

import { loadyield } from './components/store/actions/Dashaction' 
// or whatever the correct path is

Свяжите это с отправкой, передав его в connect ( документы на mapDispatchToProps):

export default connect(mapStatetoProps, {loadyield})(DashContent);

Позвоните, когда DashContainer монтируется:

class Dashboard extends Component {
  componentDidMount() {
    this.props.loadyield();
  }

  render(){
      ...