action creator.jsx

export const AddTodo = (text) => {

  const post = axios.post(API, { text });
  //logging purposes
  post.then(function(response) {
      return console.log(response);

    }, function(err) {
        console.log('Error')
        return {
          type: REMOVE_TODO,
          id
        };

    });

    return {
      type: ADD_TODO,
      id: nextId++,
      payload: text
    };
};

List.jsx

import React, { Component } from 'react';
import ListItem from '../components/ListItem';

export default class List extends Component {

  constructor(props) {
    super(props);
    //reference these functions
    this.handleOnClick = this.handleOnClick.bind(this);
    this.clearInput = this.clearInput.bind(this);
  }

  handleOnClick(e) {
    e.preventDefault();
    //save input value
    let inputValue = this.refs.inputfield.value;

    if(inputValue === '') return;
    //pass input value to callback
    this.props.addTodo(inputValue);
  }

  clearInput() {
    //clears input on clear button
    this.refs.inputfield.value = '';
    console.log('This clears the input value');
  }

  renderTodos() {
    //if items is passed as props
    if(this.props.items) {
      //map each item to have item id and item text
      return this.props.items.map((item) => {
        return (
          //pass removeTodo func to child pass text to child
          <ListItem removeTodo={this.props.removeTodo} key={item.id} text={item.text} />
        );
      });
    }
  }

  render() {
    return (
      <div>
        {/*initiate callback on submit*/}
        <form onSubmit={this.handleOnClick}>
          <input type="text" ref="inputfield"/>
          <input type="submit" value="Add" className="btn btn-primary" />
          <input onClick={this.clearInput} type="submit" value="Clear" className="btn btn-primary" />
        </form>
        <ul>
          {/*render todos*/}
          {this.renderTodos()}
        </ul>
      </div>
    );
  }
}

Main container.jsx

import React, { Component } from 'react';
import List from '../containers/List';
//action creators
import { AddTodo, RemoveTodo, FetchTodos } from '../reducers/reducer_todos';
//reference to store
import { connect } from 'react-redux';
//allows use of action creators directly (without dispatch wrapper)
import { bindActionCreators } from 'redux';


class App extends Component {

  constructor(props) {
    super(props);
    //reference these functions
    this.addTodo = this.addTodo.bind(this);
    this.removeTodo = this.removeTodo.bind(this);
  }

  componentWillMount() {
    // fetch todos
    //then dispatch them to action creator
    this.props.FetchTodos();
  }

  addTodo(text) {
    //add to do
    this.props.AddTodo(text);
    console.log('This is the text passed to the AddTodo AC: ' + text);
  }

  removeTodo(id, e) {
    //remove todo
    this.props.RemoveTodo(id);
    console.log('This is the ID of the removed todo: ' + id);
    console.log(e.type, e.which, e.timeStamp);
  }

  render() {
    return (
      <div>
        <h1>Todo List</h1>
        {/*pass down action creators
          pass down items state*/}
          <List
            items={this.props.items}
            addTodo={this.addTodo}
            removeTodo={this.removeTodo}
            />
        </div>
      );
    }
  }


  let mapDispatchToProps = (dispatch) => {
    return bindActionCreators(
      {
        AddTodo: AddTodo,
        RemoveTodo: RemoveTodo,
        FetchTodos: FetchTodos
      }, dispatch);
    };

    let mapStateToProps = (state) => {
      return {
        items: state.items,
        text: state.text
      };
    };

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

Wow awesome, I will definitely use both thunk and redux-promise-middleware in the future. Thanks again for the help, I learned an absolute ton more about redux and other things, and really feel confident using it again in the future!