Todos React

App.js

import React, { Component } from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import './App.css'

function TodosReducer (state, action) {
    switch (action.type) {
        case 'ADD_TODO':
            var todos = state.todos ? state.todos.slice() : []
            todos.push(action.todo)
            return Object.assign({}, state, {
                todos
            });
        case 'COMPLETE_TODO':
            var todos = state.todos ? state.todos.slice() : []
            var idx = todos.indexOf(action.todo);
            todos[idx] = Object.assign({}, action.todo, {
                isCompleted: true
            });
            return Object.assign({}, state, { todos })
        default:
            return Object.assign({}, state)
    }
}

const store = createStore(combineReducers({
    TODOS: TodosReducer
}), {
    TODOS: {
        todos: [{
            title: 'Go to the store',
            isCompleted: false
        }, {
            title: 'Test Me',
            isCompleted: true
        }]
    }
});

const Root = connect(state => ({
    todos: state.TODOS.todos || []
}), dispatch => ({
    addTodo: function (todoText) {
        dispatch({
            type: 'ADD_TODO',
            todo: {
                title: todoText,
                isCompleted: false
            }
        })
    },
    markCompleted: function (todo) {
        dispatch({
            type: 'COMPLETE_TODO',
            todo
        })
    }
}))(class Root extends Component {
    state = {
        newTodoText: '',
        filter: 'all'
    }
    _handleChange (e) {
        this.setState({
            newTodoText: e.target.value
        })
    }
    _onSubmit (e) {
        this.props.addTodo(this.state.newTodoText);
        this.setState({
            newTodoText: ''
        })
        e.preventDefault();
    }
    _onFilterChange (e) {
        this.setState({
            filter: e.target.value
        })
    }
    render () {
        return (
            <div>
                <div>{this.state.filter}</div>
                <form>
                    <fieldset>
                        <label>
                            <input type="radio" checked={this.state.filter === 'all'} name="filter" value="all" onChange={(e) => this._onFilterChange(e)} />
                            All
                        </label>
                        <label>
                            <input type="radio" checked={this.state.filter === 'completed'} name="filter" value="completed" onChange={(e) => this._onFilterChange(e)} />
                            Completed
                        </label>
                        <label>
                            <input type="radio" checked={this.state.filter === 'incomplete'} name="filter" value="incomplete" onChange={(e) => this._onFilterChange(e)} />
                            Incomplete
                        </label>
                    </fieldset>
                </form>
                <form onSubmit={(e) => this._onSubmit(e)}>
                    <input value={this.state.newTodoText} type="text" onChange={(e) => this._handleChange(e)}/>
                    <button type="submit">Submit</button>
                    <ul>
                        {this.props.todos.map((todo, i) => {
                            let todoElem = <TodoItem markCompleted={this.props.markCompleted} todo={todo} key={i} />
                            switch (this.state.filter) {
                                case 'incomplete':
                                    return todo.isCompleted ? null : todoElem;
                                case 'completed':
                                    return todo.isCompleted? todoElem : null;
                                default:
                                    return todoElem;
                            }
                        })}
                    </ul>
                </form>
            </div>
        )
    }
})

class TodoItem extends Component {
    render () {
        let todo = this.props.todo;
        return (
            <li>
                {!todo.isCompleted ? (
                    <button type="button" onClick={() => this.props.markCompleted(todo)}>{todo.title}</button>
                ) : (
                    <s>{todo.title}</s>
                )}
            </li>
        )
    }
}

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Root />
      </Provider>
    );
  }
}

export default App;