Learn how to create a React todo list application using the reducers we wrote before.
/** * 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}>{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();
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script> <script src="https://fb.me/react-0.14.0.js"></script> <script src="https://fb.me/react-dom-0.14.0.js"></script> <title>JS Bin</title> </head> <body> <div id="root"></div> </body> </html>