Hello everyone!

I am new to the world of React-Redux and I am currently working on a classification app using Flask API with ReactJS as the front-end. However, I am facing some issues when trying to call the API in Redux through the action file. The prediction result always shows "500 server error", even though I have tested the API in Postman and it seems to be working fine.

My main objective with this app is to extract information from the payload object and display the prediction result within the component based on the input text provided. I have been struggling with this for the past day and it's really confusing me. I am utilizing axios and promises to handle the API calls.

Any assistance or guidance on this matter would be greatly appreciated. I apologize if my question sounds silly or incorrect. Here is the output from the console:

Output console error

This is the contentAction.js file:

export const setPredict = content => ({
   type: PREDICT_CLASS,
   content 
})
export const savePredict = content => (

    (dispatch ) => {
        console.log("Predict...")
    dispatch({type: PREDICT_CLASS})
    const payload = content

    const contents = new Promise((resolve, reject) => {
        api.post('/predicts', payload).then((response) => {
            dispatch(setPredict(response.data.data))
            resolve({status: true})
        }).catch((e)=> {
            reject(e)
        })
    })

    return contents

 }
)

This is the contentReducer.js file:

import * as actions from '../actions/actionTypes'

const initState = {
    content: {},
    loading: false,
}

const contentReducer = (state = initState, action) => {
    switch (action.type) {
        case actions.PREDICT_CLASS:
            return {content: action.payload, loading: false}
        default:
            return state;
    }
}
export default contentReducer

container.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {withState, withHandlers, compose, lifecycle} from 'recompose'
import classifierComponent from '../pages/contentPages'
import {savePredict} from '../../actions/contentActions'
import {bindActionCreators} from 'redux'

// state 
const mapStateToProps = (state) => ({
    content: state.content,
    predicts: state.predicts,
})

const mapDispatchToProps = dispatch => ({
   savePredict: bindActionCreators(savePredict, dispatch),
})

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    withState('contentValue', 'setContentValue', ''),
    withState('predicts', 'setPredicts', ''),
    withState('loading', 'setLoading', false),
    withHandlers({
        handleContent: props => (event) => {
            event.preventDefault()
            props.setContentValue(event.target.value)
        },
        onSubmit: props => (event) => {
            event.preventDefault()
            props.setLoading(true)
            props.setContentValue(event.target.value)
            props.setPredicts(event.target.value)
            props.savePredict(props)
        }
    }),
)(classifierComponent)

component.js

const contentPages = ({handleContent, contentValue, predicts, onSubmit, loading}) => {
    return (
        <>
            <Container>
                <h1>Let's Classified Content!</h1>
                <Form onSubmit={onSubmit}>
                    <TextArea 
                        placeholder='Tell us more' 
                        onChange={handleContent}
                        value={contentValue}
                        name="content"
                    />
                    <Button 
                        style={{marginTop: "20px"}} 
                        primary
                        type="submit"
                        disabled={loading}
                    >
                        {loading? 'Making Prediction' : 'Predict'}
                    </Button>
                </Form>
                <br/>
                <p>Predicted: {predicts}</p>
            </Container>
        </>
    );
};

contentPages.propTypes = {
    handleContent: PropTypes.func,
    contentClick: PropTypes.func,
    contentValue: PropTypes.string,
    predicts: PropTypes.string,
    loading: PropTypes.bool,
};

export default contentPages;

This is the expected interface: Interface

Please note that there should be an output displayed.

webUrl api

import axios from 'axios'

export default axios.create({
    baseURL: `http://127.0.0.1:5000/api`,
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
    timeout: 10000,
});

this is index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux'
import {createStore, applyMiddleware} from 'redux'
import rootReducer from './reducers/contentReducer'
import {BrowserRouter as Router} from 'react-router-dom'
import Routes from './routes/routes'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Routes/>
    </Router>
  </Provider>,
  document.getElementById('root')
);