Redux Example using React

A simple TODO application from Dan Abramov's tutorials. You can click on a TODO to mark it complete and vice versa. Note: You can also filter Completed/Incompleted/All TODOs.

by nickkell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
<!-- Sample by @SheerPace170 -->
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="root"></div>

Babel + JSX

// Individual Reducer

const defaultState = {
  items: [{
    id: 1,
    value: 'hello'
  }, {
    id: 2,
    value: 'world'
  }, ]
};
const myReducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'REMOVE':
      return {
        items: state.items.filter(({
          id
        }) => id !== action.id)
      };
    default:
      return state;
  }
};

const {
  combineReducers,
  createStore
} = Redux;

//Combined Reducer
//const App = combineReducers({
  //todos,
  //visibilityFilter
//})

//Store
const store = createStore(myReducer);

const {
  Component
} = React;
const TodoApp = React.createClass({
  render() {
    const visibleTodos = getVisibleTodosReducer(
      this.props.todos,
      this.props.visibilityFilter
    );

    return ( < div >
      < input ref = {
        node => {
          this.input = node;
        }
      }
      /> < button onClick = {
        () => {
          if (!this.input.value || this.input.value.length == 0) return;

          store.dispatch({
            type: 'ADD_TODO',
            text: this.input.value,
            id: nextTodoId++
          })

          this.input.value = '';
        }
      } > Add < /button>

      < ul > {
        visibleTodos.map(todo =>
          < li key = {
            todo.id
          }

          onClick = {
            () => {
              store.dispatch({
                type: 'TOGGLE_TODO',
                id: todo.id
              });
            }
          }

          style = {
            {
              textDecoration: todo.completed ? 'line-through' : 'none'
            }
          } > {
            todo.text
          } < /li>
        )
      } < /ul>

      < p >
      Show: {
        ' '
      } < FilterLink filter = 'SHOW_ALL' > All < /FilterLink> {
        ' '
      } < FilterLink filter = 'SHOW_ACTIVE' > Active < /FilterLink> {
        ' '
      } < FilterLink filter = 'SHOW_COMPLETED' > Completed < /FilterLink> < /p>

      < /div>
    );
 ...