App.jsx

import React, { Component } from 'react';
import List from '../containers/List';
//action creators
import { AddTodo, RemoveTodo, FetchData } 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.FetchData(payload);
  }

  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,
        FetchData: FetchData
      }, dispatch);
    }

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

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

Reducer_Actions.jsx

import dotProp from 'dot-prop-immutable';
//save string values to vars
const ADD_TODO = 'ADD_TODO';
const REMOVE_TODO = 'REMOVE_TODO';
// const LOAD_TODO = 'LOAD_TODO';
// const POST_TODO = 'POST_TODO';
// const REQUEST_TODOS = 'REQUEST_TODOS';
const FETCH_TODOS = 'FETCH_TODOS';

let nextId = 0;
let index = 0;
//the action is whats performed to alter state
//addItem is an action creator and nees to return an action
export const AddTodo = (text) =>  {
  return {
    type: ADD_TODO,
    id: nextId++,
    text
  };
}

export const RemoveTodo = (id) => {
  return {
    type: REMOVE_TODO,
    id
  }
}

// export const RequestTodos = (items) => {
//   return {
//     type: REQUEST_TODOS,
//     items
//   }
// }
//
// export const LoadTodos = (items) => {
//   return {
//     type: LOAD_TODO,
//     res: res.items
//   }
// }
//
// export const PostTodo = (item) => {
//   return {
//     type: POST_TODO,
//     item
//   }
// }

export const FetchData = (type) => {
  const req = fetch('http://localhost:3000/todo/');
  return {
    type: FETCH_TODOS,
    payload: req
  }
}

//initial state of items and text
const initialState = {
  items: [],
}
//A pure function that takes the current/prev state
//and an action, and returns the next state
//Reducer controls the state, and is where state lives.
export const TodoState = (state = initialState, action) => {
  switch(action.type) {
    case ADD_TODO:
      state = dotProp.set(state, 'items', items => [...items, { text: action.text, id: action.id }])
      console.log('This is my state after ADD_TODO : ' + state, action);
      return state;
    case REMOVE_TODO:
      state = dotProp.delete(state, `items.${index}`)
      console.log(index);
      console.log(state, action);
      return state;
    case FETCH_TODOS:
      console.log(action.req);
      return action.payload;
  default:
    return state;
  }
}

reducers_actions.jsx

import dotProp from 'dot-prop-immutable';
import axios from 'axios';

//save string values to vars
const ADD_TODO = 'ADD_TODO';
const REMOVE_TODO = 'REMOVE_TODO';
const POST_TODO = 'POST_TODO';
const FETCH_TODOS = 'FETCH_TODOS';

let nextId = 0;
let index = 0;
//the action is whats performed to alter state
//addItem is an action creator and nees to return an action
export const AddTodo = (text) => {
  const post = axios.post('http://localhost:3000/todo/')
  post.then(function(response) {
      if(response !== 200) {
          console.log("Error performing action!");
      }
  });
      return {
        type: ADD_TODO,
        id: nextId++,
        text
    };
}

export const RemoveTodo = (id) => {
  const remove = axios.delete('http://localhost:3000/todo/ ');
  return {
    type: REMOVE_TODO,
    id,
    remove
  };
}

export const FetchTodos = (id) => {
  const req = axios.get('http://localhost:3000/todo/');
  return {
    type: FETCH_TODOS,
    payload: req
  };
}

//initial state of items and text
const initialState = {
  items: [],
}
//A pure function that takes the current/prev state
//and an action, and returns the next state
//Reducer controls the state, and is where state lives.
export const TodoState = (state = initialState, action) => {
  switch(action.type) {
    case ADD_TODO:
      state = dotProp.set(state, 'items', items => [...items, { text: action.text, id: action.id }])
      console.log('This is my state after ADD_TODO : ' + state, action);
      return state;
    case REMOVE_TODO:
      state = dotProp.delete(state, `items.${index}`);
      console.log(index);
      console.log(state, action);
      return state;
    case FETCH_TODOS:
      console.log(action.payload.data);
      const data = action.payload.data;
      state = dotProp.set(state, 'items', data);
      return state;
    case POST_TODO:
      return state;
    default:
      return state;
  }
}