/** * 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; } }; /** * combineReducers: used for merge reducers togethger * createStore: create a redux store */ const { combineReducers, createStore } = Redux; const todoApp = combineReducers( { todos, visibilityFilter } ); const store = createStore( todoApp ); /** * For generate todo's id * @type {number} */ let nextTodoId = 0; /** * React related */ const {Component} = React; class TodoApp extends Component { render() { 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> //loop thought the todo list {this.props.todos.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> </div> ); } } const render = () => { ReactDOM.render( <TodoApp todos={store.getState().todos}/>, document.getElementById( 'root' ) ); }; //Every time, store updated, also fire the render() function store.subscribe( render ); render();