[Redux] React Todo List Example (Adding a Todo)
2023-09-14 09:00:54 时间
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>
相关文章
- C#如何把List of Object转换成List of T具体类型
- leetcode 之Copy List with Random Pointer(23)
- python中列表(list)函数及使用
- [uboot]Issue list
- Ajax传递List对象到前台展示问题遇到的坑
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- [Redux] React Todo List Example (Toggling a Todo)
- uni-app:使用uni-list显示列表数据之三:上拉加载更多(hbuilderx 3.6.18)
- Reuse library debug in Chrome - phase3 exchange drop down list
- JavaWeb课程复习资料(三)——将【resultSet】形式的数据转为List<T>的形式
- C# byte数组转换成List<String>
- leetcode - Rotate List
- python函数中把列表(list)当参数时的"入坑"与"出坑"