[Redux] React Todo List Example (Adding a Todo)

时间：2016-01-12 19:21:34 阅读：142 评论：0 收藏：0 [点我收藏+]

标签：

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>

[Redux] React Todo List Example (Adding a Todo)

标签：

原文地址：http://www.cnblogs.com/Answer1215/p/5125218.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行