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 ({ this.input = node } }/>); }}const render = () => { ReactDOM.render(//loop thought the todo list { this.props.todos.map( ( todo )=> { return
- {todo.text}
} )}, document.getElementById( 'root' ) );};//Every time, store updated, also fire the render() functionstore.subscribe( render );render();
JS Bin