Sending Requests from react-redux to backend API

Question

My back-end server is NodeJs connect to MongoDB atlas, there's a route called companyorders which accepts post requests to enable users to create company orders. I'm trying to send the post request from react application through Redux.

Here's my code...

Redux Store

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

Redux Actions

import axios from 'axios';
import { GET_ERRORS, ADD_COMPANY_ORDER } from './types';

// Add Company Order
export const addCompanyOrder = (orderData) => (dispatch) => {
  axios
    .post('/api/companyorder/create', orderData)
    .then((res) =>
      dispatch({
        type: ADD_COMPANY_ORDER,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      })
    );
};

Redux Reducers

import { ADD_COMPANY_ORDER } from '../actions/types';

const initialState = {};

export default function addCompanyOrder(state = initialState, action) {
  switch (action.type) {
    case ADD_COMPANY_ORDER:
      return {
        ...state,
        initialState: action.payload,
      };
    default:
      return state;
  }
}

Redux Combined Reducers

import { combineReducers } from 'redux';
import addCompanyOrder from './companyOrderReducer';

export default combineReducers({
  co_order: addCompanyOrder,
});

The react component

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { addCompanyOrder } from '../../actions/companyOrderActions';
class Companyorder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderName: '',
      date: '',
      orderQuantity: '',
      orderSupplier: '',
      orderCost: '',
      oderTax: '',
      supplierInfo: [
        {
          name: '',
          location: '',
          phone: '',
          email: '',
        },
      ],
      oderReceived: '',
      errors: {},
    };
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  componentDidUpdate(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }
  onSubmit(e) {
    e.preventDefault();

    const newOrder = {
      orderName: this.state.orderName,
      date: this.state.date,
      orderQuantity: this.state.orderQuantity,
      orderSupplier: this.state.orderSupplier,
      orderCost: this.state.orderCost,
      oderTax: this.state.oderTax,
      name: this.state.name,
      location: this.state.location,
      phone: this.state.phone,
      email: this.state.email,
    };

    this.props.addCompanyOrder(newOrder);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    const { errors } = this.state;
    return (
      
        
          
            
               Back To Dashboard
            
          

        


        
           Company Order Form
          
            
              
                Order Name
              
              
                
              
            

            
              
                Order Date
              
              
                
              
            

            
              
                Order Quantity
              
              
                
              
            

            
              
                Order Supplier
              
              
                
              
            

            
              
                Order Cost
              
              
                
              
            

            
              
                Order Tax
              
              
                
              
            
            
              Supplier info
              
                
                  
                    Name
                  
                  
                    
                  
                
                
                  
                    Location
                  
                  
                    
                  
                
                
                  
                    Phone
                  
                  
                    
                  
                
                
                  
                    Email
                  
                  
                    
                  
                
              
            
            
          
        
      

    );
  }
}

Companyorder.propTypes = {
  addCompanyOrder: PropTypes.func.isRequired,
  co_order: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  co_order: state.co_order,
  errors: state.errors,
});

export default connect(mapStateToProps, { addCompanyOrder })(
  withRouter(Companyorder)
);

The code is compiling successfully, but redux is not making any request, even not filling the redux state. If know the error or a better way to do it, please leave your reply and I'm very appreciated.

Sending Requests from react-redux to backend API

Answers (1)

Related Questions