JSFiddle - React, Tailwind, and code Playground

Redux #1: State Tree

by nickadeemus2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<body>
  <div id="root">
  </div>
</body>

CSS

.fitler-controls span{ display: inline-block; }
.filter-controls ul {list-style: none; display: inline; padding: 0; margin:0;}
.filter-controls ul li{display: inline;margin-left: 10px;}

Babel + JSX

/*
********************************************
 * Maintain state tree example
 *******************************************
 */
 
/*
* ACTIONS
*/
const ADD_TODO = 'ADD_TODO';     
const TOGGLE_TODO = 'TOGGLE_TODO'; 
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
const Filters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
};

/*
* REDUCERS
*/
const todos = (state = [], action) => {   
  switch (action.type) { 
  case ADD_TODO:
    return [...state, {
      text: action.text,
      id: action.id,
      completed: false
    }];
  case TOGGLE_TODO:
    return state.map(todo =>
      todo.id === action.id 
      	? Object.assign( {}, todo, { completed: !todo.completed } ) 
        : todo
    );
  default:
      return state;
  }
}

const visibilityFilter = (state = Filters.SHOW_ALL, action) => {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return action.filter;
  default:
    return state;
  }
}

const todoApp = Redux.combineReducers({
  todos,
  visibilityFilter
});



/*
/ UI Components
*/

class AddTodo extends React.Component {
  //events
  handleClick(e) {
    const node = this.refs.input;
    const text = node.value.trim();
    this.props.onAddClick(text);
    node.value = '';
  }
  //view
  render() {
    return (
      <div>
        <input type='text' ref='input' />
        <button onClick={(e) => this.handleClick(e)}>
          Add
        </button>
      </div>
    );
  }
}

const FilterLink = ({ isActive, name, onClick }) => {
  if (isActive) {
    return <span>{name}</span>;
  }

  return (
  	<span>
      <a href='#' onClick={e => { e.preventDefault(); onClick(); }}>
        {name}
      </a>
    </span>
  );  
};

const Footer = ({ filter, onFilterChange }) => (
  <div className="filter-controls">
    <span>Show</span>
    <ul>
      <li>
        <FilterLink
          name='All'
          isActive={filter === Filters.SHOW_ALL}
          onClick={() => onFilterChange(Filters.SHOW_ALL)}...