1Reducer.jsx

import dotProp from 'dot-prop-immutable';
//save string values to vars
const ADD_TODO = 'ADD_TODO';

let nextId = 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
  };
}
//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(state, action);
      return state;
  default:
    return state;
  }
}

2Root.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import dotProp from 'dot-prop-immutable';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { ToDoState } from '../src/reducers/reducer_todos';

let store = createStore(ToDoState);

console.log(store);

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
  document.querySelector('.container'));

3App.jsx

import React, { Component } from 'react';
import { AddTodo } from '../reducers/reducer_todos';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import List from '../containers/List';

class App extends Component {

  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    this.props.AddTodo();
  }

  render() {
    return (
      <div>
        <h1>To Do App</h1>
          <List
            items={this.props.items}
            handleSubmit={this.handleSubmit}
             />
      </div>
    )
  }
}

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

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

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

4List.jsx

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

export default class List extends Component {

  constructor(props) {
    super(props);

    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnClick(e) {
    e.preventDefault();
    let inputValue = this.refs.inputfield.value;
    this.props.handleSubmit(inputValue);
    console.log(inputValue);
  }

  renderTodos() {
    return this.props.items.map((item) => {
      return (
        <ListItem key={item.id} text={item.text} />
      );
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleOnClick}>
          <input type="text" ref="inputfield"/>
          <input type="submit" value="Add" />
        </form>
        <ul>
          {this.renderTodos()}
        </ul>
      </div>
    );
  }
}

5ListItem.jsx

import React, { Component } from 'react';

export default class ListItem extends Component {
  render() {
    return (
      <li>
        {this.props.text}
      </li>
    );
  }
}