List (dumb component)

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

export default class List extends Component {

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

  render() {

    return (
      <div>
        <ul>
          <form>
            <input onChange={this.props.handleOnChange} ref="inputfield"/>
            <button onClick={this.props.handleOnClick} >Add</button>
          </form>
          {/*{this.renderTodos()};*/}
        </ul>
      </div>
    );
  }
}

ListItem (dumb component)

import React, { Component } from 'react';

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

Main container

import React, { Component } from 'react';
//import actions
import { UpdateText } from '../reducers/reducer_todos';
import { AddToDo } from '../reducers/reducer_todos';
console.log(AddToDo);
console.log(UpdateText);

// import { RemoveToDo } from '../reducers/reducer_todos';
//connect to store
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
//import List component
import List from '../containers/List';

class App extends Component {

  constructor(props) {
    super(props);
  }

  handleOnChange(e) {
    this.props.UpdateText(e.target.value);
    console.log(e.target.value);
  }

  handleOnClick(e) {
    e.preventDefault();
    this.props.AddTodo(this.getInputText());
    console.log('test click');
  }

  getInputText() {
    return this.refs.inputfield.value;
    console.log(this.refs.inputfield.value);
  }

  render() {
    return (
      <div>
        <h1>To Do App</h1>
          <List />
      </div>
    )
  }
}

let mapDispatchToProps = (dispatch) => {
  //takes single action or object as first arg
  //takes dispatch as second arg
  return bindActionCreators(
    {
      AddToDo: AddToDo,
      UpdateText: UpdateText
    }, dispatch);
}

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

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

Reducer action creators

//create store
// import { createStore } from 'redux';
//save string values to vars
const ADD_TODO = 'ADD_TODO';
const UPDATE_TEXT = 'UPDATE_TEXT';
const REMOVE_TODO = 'REMOVE_TODO';

let nextId = 0;
//the action is whats performed to alter state
//addItem is an action creator and nees to return an action
//an object with a type property
export const AddToDo = (text) =>  {
  return {
    type: ADD_TODO,
    id: nextId++,
    text
  };
}
//action that updates input text
export const UpdateText = (text) => {
  return {
    type: UPDATE_TEXT,
    text
  };
}

// export const RemoveToDo = (id) => {
//   return {
//     type: REMOVE_TODO,
//     id
//   };
// }

//initial state of items and text
const initialState = {
  items: [],
  text: ''
}
//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.
//Adds a new to do item
//state is initialstate
export const ToDoState = (state = initialState, action) => {
  //looks at the action type
  //returns current state plus the new state
  switch(action.type) {
    case ADD_TODO:
      //if add_todo action update items with item text
      return [...state, {id: action.id, text: action.text }]
  //returns state by default
    case UPDATE_TEXT:
      state.UpdateText = action.text;
      return state;
  default:
    return state;
  }
}

Root file

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';

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'));