React-Redux API Get 請求動作不執行？

Question

您好，我目前正在使用 React-Redux 以從我的 Flask API 獲取信息並在網站上顯示 json，API 運行良好，但被調用的操作似乎從未執行過？ 我對 redux 很陌生，所以我擔心我錯過了什么？ 我的減速器在提供虛擬數據時顯示信息，但該操作似乎不會執行以獲取數據？ 我的操作中的默認數據甚至沒有顯示？

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

2. 通過將其傳遞給connect來將其綁定到調度（ 關於mapDispatchToProps文檔）：

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

2. 當DashContainer掛載時調用它：

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

  render(){
      ...