Todos is React and Redux UI

TodosInReactReduxUI.js

import React from 'react';
import ui from 'redux-ui';

// TodosMainContainer.js
const mapStateToProps = state => ({
  todos: state.todos.todos
});

const mapDispatchToProps = state => ({
  addTodo: (data) => dispatch(addTodo(data))
});

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

// TodosMain.js
const TodosMain = props => {
  const {
    todos,
    addTodo
  } = props;
  
  return (
    <div className="container">
      <AddTodo
        todos={todos}
        addTodo={addTodo}
      />
      <TodosList
        todos={todos}
      />
    </div>
  );
};

export default TodosMain;

// AddTodo.js
const initialState = {
  todo: ''
};

const AddTodo => props => {
  const {
    todos,
    addTodo
  } = props;
  
  const handleOnClick (e) => {
    const todo = e.target.value;
    addTodo(todo);
  };
  
  const handleOnChange (e) => {
    const todo = e.target.value;
    updateUI({ todo });
  };
  
  return (
    <div>
      <input
        type="text"
        placeholder="Add your todo here"
        name="todo"
        value={ui.todo}
        onChange={(e) => handleOnChange(e)}
      />
      <button
        onClick={(e) => handleOnClick(e)}
        disable={!ui.todo}
      >Add<button>
    </div>
  );
};

AddTodo.propTypes = {
  ui: React.PropTypes.object.isRequired,
  updateUI: React.PropTypes.func.isRequired,
  todos: React.PropTypes.object.isRequired,
  addTodo: React.PropTypes.func.isRequired
};

export default ui({ state: initialState })(AddTodo);

// TodoList.js
const TodoList = props => {
  const {
    todos
  } = props;
  
  return (
    <ul>
    { todos.map(todo => (
      <li>{todo}</li>
    ))}
    </ul>
  )
};

TodoList.propTypes = {
  todos: React.PropTypes.object.isRequired
};

export default TodoList;