CODEWITHSUNDEEP
javascriptreactjsapiredux
Charlie
Charlie

Reputation: 85

React-Redux API Get request action does not execute?

Hello I am currently using React-Redux in order to get information from my Flask API and display the json on the website, The API is working perfectly but the action that is called never seems to execute? I am very new to redux so I fear I have missed something? my reducer displays infomation when supplied dummy data but the action wont seem to execute to get the data? my default data in my action is not even displayed?

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

Dashboard.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;

Index.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'));

Any advice would be great ! :)

Upvotes: 0

Views: 109

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14375

It seems like you just need to actually use it.

In DashContainer:

  1. Import it:
import { loadyield } from './components/store/actions/Dashaction' 
// or whatever the correct path is
  1. Bind it to dispatch by passing it to connect (docs on mapDispatchToProps):
export default connect(mapStatetoProps, {loadyield})(DashContent);
  1. Call it when DashContainer mounts:
class Dashboard extends Component {
  componentDidMount() {
    this.props.loadyield();
  }

  render(){
      ...

Upvotes: 1

Related Questions