React-Redux-Express, server/client communication issue

Question

I am trying to communicate send a database call from my express server over to my react-redux application but receive the below error:

postsActions.js:18 Error: Request failed with status code 404 at createError (createError.js:16) at settle (settle.js:18) at XMLHttpRequest.handleLoad (xhr.js:77)

My serer is running separately from the compiled react. The goal of the below is to do a GET rest call to grab the relevant information. I couldn't find the above error anywhere else online. I am then trying to display all of the grabbed information in a Card that is being rendered in a Map function in the center of the last code snippet. Any ideas would be greatly appreciated.

Here is the express server:

const PORT              = 3001;
const express           = require('express');
const SocketServer      = require('ws').Server;
const WebSocket         = require('ws');
const models            = require("./models");
const sass              = require("node-sass-middleware");

require('dotenv').config()

const app = express();

app.use('/public', express.static('public'))
  .listen(PORT, '0.0.0.0', 'localhost', () => console.log(`Listening on ${ PORT }`));

models.sequelize.sync({ force: false }).then(() => {
  app.get("/posts", (req, res) => {
    models.post.findAll({ raw: true })
      .then((response) => {
        console.log(response)
        res.send(response);
      }).catch((err) => {
        console.error(err);
      });
  });
});

This is my postActions.js

import * as types from './actionTypes';
import axios from 'axios';

const loadPostsActions = (post) => {
  return {
    type: types.LOAD_POSTS
  };
}

export function loadPosts() {
  return dispatch => {
    return axios.get('/posts')
    .then(post => {
      console.log(post)
      dispatch(loadPostsActions(post));
    })
    .catch((error) => {
      console.log(error);
    });
  }
}

postsReducer.js

import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function postsReducer(state = initialState.posts, action) {
  switch (action.type) {
    case types.LOAD_POSTS:
      return [
        ...state,
        Object.assign({}, action.posts)
      ];

    default:
      return state;
  }
}

Page where everything is rendering. The focus is on the map*ToProps functions at the bottom and map below Col id='article' in the center

import React, { Component } from 'react';
import { Row, Col, Slider, Slide } from 'react-materialize';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import '../../styles/App.css';
import * as postActions from '../../actions/postsActions';
import Articles from '../articles/Articles.jsx';
import initialState from '../../reducers/initialState.js';

class HomePage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: Object.assign({}, props.posts)
    }
  }

  componentDidMount = () => {
    console.log('this.state.posts', this.state.posts)
  }

  render() {
    const overflow = {
      'overflow': 'auto',
      'overflowY': 'hidden',
      'height': '400px'
    }
    return (
      <main className='align'>
        <Row>
          <Col s={12} m={8} id='sliding-cards'>
            <Slider>
              <Slide
                src="concert.jpg">
              </Slide>
              <Slide
                src="Event-Management-Banner.jpg"
                placement="left">
              </Slide>
              <Slide
                src="event-planning-and-management.jpg"
                placement="right">
              </Slide>
            </Slider>
          </Col>
          <Col s={12} m={4} id='articles' style={overflow}>
             {
              this.props.posts.map(({ post }) => {
                return <Articles
                  post={post}
                  key={post.id}
                />
              })
            } 
          </Col>
        </Row>

        <br/>
        <br/>
        <br/>
        <br/>
        <br/>

        <section className="container iconRow z-10">
          <Row className="section">

            <Col s={12} m={4} className="icons card-panel hoverable z-10">
              <div className="icon-block">
                <h2 className="center blue-text text-darken-2"><i className="material-icons">flash_on</i></h2>
                <h5 className="center">Frozen Account</h5>

                <p className="light">A series of things that can be said to tell you about how to solve your frozen account issue.</p>
              </div>
            </Col>

            <Col s={12} m={4} className="icons card-panel hoverable z-10">
              <div className="icon-block">
                <h2 className="center blue-text text-darken-2"><i className="material-icons">group</i></h2>
                <h5 className="center">Garnished Wages</h5>

                <p className="light">A series of things that can be said to tell you about how to solve your garnished wages issue.</p>
              </div>
            </Col>

            <Col s={12} m={4} className="icons card-panel hoverable z-10">
              <div className="icon-block">
                <h2 className="center blue-text text-darken-2"><i className="material-icons">settings</i></h2>
                <h5 className="center">CRA Letters</h5>

                <p className="light">A series of things that can be said to tell you about how to solve your CRA letters issue.</p>
              </div>
            </Col>

          </Row>
        </section>

      </main>   
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    posts: state.posts
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(postActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

I am calling the store in index.js like this (which I assume is pretty standard):

const store = configureStore();
store.dispatch(loadPosts());