標籤:
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() functionstore.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>
[Redux] React Todo List Example (Adding a Todo)