[Redux] React Todo List Example (Filtering Todos)

/**
 * A reducer for a single todo
 * @param state
 * @param action
 * @returns {*}
 */
const todo = ( state, action ) => {
    switch ( action.type ) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            };
        case 'TOGGLE_TODO':
            if ( state.id !== action.id ) {
                return state;
            }

            return {
                ...state,
                completed: !state.completed
            };
        default:
            return state;
    }
};

/**
 * The reducer for the todos
 * @param state
 * @param action
 * @returns {*}
 */
const todos = ( state = [], action ) => {
    switch ( action.type ) {
        case 'ADD_TODO':
            return [
                ...state,
                todo( undefined, action )
            ];
        case 'TOGGLE_TODO':
            return state.map( t => todo( t, action ) );
        default:
            return state;

    }
};

/**
 * Reducer for the visibilityFilter
 * @param state
 * @param action
 * @returns {*}
 */
const visibilityFilter = ( state = 'SHOW_ALL',
                           action ) => {
    switch ( action.type ) {
        case 'SET_VISIBILITY_FILTER':
            return action.filter;
        default:
            return state;
    }
};

const getVisibleTodos = (
  todos,
  filter
) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(
        t => t.completed
      );
    case 'SHOW_ACTIVE':
      return todos.filter(
        t => !t.completed
      );
  }
}

/**
 * combineReducers: used for merge reducers togethger
 * createStore: create a redux store
 */
const { combineReducers, createStore } = Redux;
const todoApp = combineReducers( {
    todos,
    visibilityFilter
} );

const store = createStore( todoApp );

const FilterLink = ({
  filter,
  currentFilter,
  children
}) => {
  if (filter === currentFilter) {
    return <span>{children}</span>;
  }

  return (
    <a href='#'
       onClick={e => {
         e.preventDefault();
         store.dispatch({
           type: 'SET_VISIBILITY_FILTER',
           filter
         });
       }}
    >
      {children}
    </a>
  );
};

/**
 * For generate todo's id
 * @type {number}
 */
let nextTodoId = 0;

/**
 * React related
 */
const {Component} = React;
class TodoApp extends Component {
    render() {

      const {todos, visibilityFilter} = this.props;
      let visibleTodos = getVisibleTodos(todos, visibilityFilter);

        return (
            <div>
                <input ref={
        (node)=>{
            this.input = node
        }
    }/>
                <button onClick={
        ()=>{
        //After clicking the button, dispatch a add todo action
            store.dispatch({
                type: 'ADD_TODO',
                id: nextTodoId++,
                text: this.input.value
            })
            this.input.value = "";
        }
    }>ADD todo
                </button>
                <ul>
                    {visibleTodos.map( ( todo )=> {
                        return (
                            <li key={todo.id}
                                style={{
                                 textDecoration: todo.completed ?
                                 'line-through' : 'none'
                                }}

                                onClick={ ()=>{
                                   store.dispatch({
                                   type: 'TOGGLE_TODO',
                                   id: todo.id
                                  })
                                }}
                            >
                                {todo.text}
                            </li>
                        )
                    } )}
                </ul>
                <p>
                  Show:
                  {' '}
                  <FilterLink filter="SHOW_ALL" currentFilter={visibilityFilter}>
                    All
                  </FilterLink>
                  {' '}
                  <FilterLink filter="SHOW_ACTIVE" currentFilter={visibilityFilter}>
                    Active
                  </FilterLink>
                  {' '}
                  <FilterLink filter="SHOW_COMPLETED" currentFilter={visibilityFilter}>
                    Completed
                  </FilterLink>
                  {' '}
                </p>
            </div>
        );
    }
}

const render = () => {
    ReactDOM.render(
        <TodoApp {...store.getState()}/>,
        document.getElementById( 'root' )
    );
};

//Every time, store updated, also fire the render() function
store.subscribe( render );
render();