REACT + REDUX + TODO APP

<!DOCTYPE html>
<html>

  <head>
   
    
    <script data-require="redux@*" data-semver="3.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.2.1/redux.js"></script>
    
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="root" class="container"></div>
   
    <script src="src/actions/todo.js"></script>
     <script src="src/reducers/todo.js"></script>
     
      <script src="src/store.js"></script>
      
    <script src="src/components/todo-list.js"></script>
    <script src="src/components/todo-form.js"></script>
    <script src="src/containers/todos-page.js"></script>
    <script src="src/app.js"></script>
    <script src="src/index.js"></script>
  </body>

</html>

const App =()=>{
  function render ( ) {    
   return  (<TodosPage />)
    
  }
 return {
   render:render
 }
}

/* Styles go here */

.todo-item{
  list-style-type:none;
}
.complete{
  text-decoration:line-through;
}


function render() {

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
}
render();
store.subscribe(render);

const TodoForm = (props)=> {
  
  function changeHandler(e) {
    props.currentChange(e.target.value)
  }
   function clickHandler(e) {
    e.preventDefault();
    props.addTodo(props.currentTodo);
    
  }
  
    return (
      <form className="form">
  <div className="form-group">
    <input type="text"
          value={props.currentTodo} 
          onChange = {changeHandler}
          className="form-control"/>
    <button type="button"
    className="btn btn-success"
    onClick={clickHandler}
    > Add </button>
    </div>
  </form>
  );
  

   
}

const {combineReducers} = Redux;

const initialState = {
  todos: [{
    id: 1,
    name: 'testing',
    isComplete: true
  }, {
    id: 2,
    name: 'programming',
    isComplete: false
  }],
  currentTodo:'temp'
};

const store = Redux.createStore(combineReducers({
  todos: todoReducer
}));

 
const TodoItem = (props)=> {
  const {id,toggleTodo,name,isComplete} = props;
  function handleToggle(e) {
    
    toggleTodo(props.id);
  }
  return (
    <li className="todo-item list-group-item">
        <input type="checkbox" className="checkbox" 
        id={'chk'+id}
       
        defaultChecked={isComplete}
        onChange={handleToggle}/> 
        <label htmlFor={'chk'+id}
         className={isComplete?'complete':''}>
         &nbsp;{name }
      </label>
    </li>
    );}
 
const TodoList =(props)=> ( 
      <div>
        {props.todos.map(todo=> <TodoItem key={todo.id} 
        {...todo} 
        toggleTodo={props.toggleTodo}/>)}
      </div>
);

const ADD_TODO = '[Todo] Add';
const CURRENT_UPDATE = '[Todo] Current Update';
const TOGGLE_TODO ='[Todo] Toggle';

function todoReducer(state = initialState, action = {}) {
  switch (action.type) {
    case TOGGLE_TODO:
      return Object.assign(
        {},
        state,
        {todos: state.todos.map(t=>{
          if(t.id===action.payload.id) {
            return Object.assign({},t,{isComplete:!t.isComplete});
          }
          return t;
        })
        }
        );
    case ADD_TODO:
      return Object.assign({},
        state, {
          currentTodo:'',
          todos: state.todos.concat([action.payload])
        }
      );
      case CURRENT_UPDATE:
      return Object.assign({},
        state, {
          currentTodo: action.payload
        }
      );
    default:
      return state;
  }
  return state;
}

const TodosPage =(props) =>{
  const todosState = store.getState().todos;
  console.log('state',todosState);
  
  function currentChange( val) {
    store.dispatch({
      type:CURRENT_UPDATE,
      payload:val }
      );
  }
  
  function addTodo(val) {
    store.dispatch({
      type:ADD_TODO,
      payload:{id:Date.now(),name:val,isComplete:false} }
      );
  }
  
  function toggleTodo(id) {
    store.dispatch({
      type:TOGGLE_TODO,
      payload:{id}
      });
  }
  
    return (
      <div className="todo-app">
        <TodoForm currentTodo={todosState.currentTodo}
        addTodo={addTodo}
        currentChange={currentChange}/>
        <TodoList todos={todosState.todos}
        toggleTodo={toggleTodo}/>
        </div>
  );
  
}