<repo_name>b0nik/React-todos<file_sep>/src/redux/reducers/todosReducer.js
const initialState=[
    {
        id:1,
        complete:false,
        task:'Some text',
    },
    {
        id:2,
        complete:true,
        task:'Some enother text',
    }
];

export default function (state=initialState,action) {
    switch (action.type){
        case "CHANGE_TEXT":
            const txt=action.payload;
            if(txt.length===0){
                return initialState;
            }
            return {text:action.payload};
        default:
            return state
    }
}<file_sep>/src/routes.js
import React, {Component} from 'react';
import { IndexRoute, Route }  from 'react-router';
import App from './containers/App'
import Todos from './containers/Todos'


export default (
    <Route component={App}>
            <Route path="/" component={Todos}>
                <Route path="/:id" component={Todos}/>
            </Route>
    </Route>
)<file_sep>/src/redux/configureStore/index.js
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../reducers/index'

export default function configureStore(initialState) {
    const logger = createLogger({
        collapsed: true,
        predicate: () =>
        process.env.NODE_ENV === `development` // eslint-disable-line no-unused-vars
    });

    const middleware = applyMiddleware(thunk, logger);

    return middleware(createStore)(rootReducer, initialState);
}
<file_sep>/src/redux/actions/todos.js
export function changeText (text) {
    return{
        type:"CHANGE_TEXT",
        payload:text
    }
}
<file_sep>/src/Components/table/index.js
import React, {Component} from 'react';
import { Checkbox, Textfield,FABButton, Icon } from 'react-mdl'

if(process.env.BROWSER){
   const style= require('./styles.less')
}

export default class Table extends Component{

    render(){
        let Head=[];
        for(let key in this.props.data[0]){
            if(key!=='id'){
                Head.push((
                    <th key={key}>{key}</th>
                ))
            }
        }
        let temp=this.props.data.map((item,i)=>{
            return(
                <tr className={item.complete?'bg-complate':null} data-id={item.id} key={i}>
                    <td style={{verticalAlign:'middle'}} key={i}>{i+1}</td>
                    <td style={{verticalAlign:'middle'}}><Checkbox defaultChecked={item.complete}/></td>
                    <td style={{verticalAlign:'middle'}}>
                        <Textfield
                            onChange={() => {}}
                            defaultValue={item.task}
                            label=''
                            style={{width: '100%'}}
                        />
                    </td>
                    <td style={{verticalAlign:'middle',textAlign:'center'}}>
                        <FABButton colored>
                        <Icon name="remove" />
                    </FABButton>
                    </td>
                </tr>
            )
        });

        return(
            <table className="table">
                <thead>
                <tr>
                    <th>#</th>
                    {Head}
                    <th>delete</th>
                </tr>
                </thead>
                <tbody>
                {temp}
                </tbody>
            </table>
        )
    }
}