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

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>

 

posted @ 2016-01-12 18:11  Zhentiw  阅读(405)  评论(0)  编辑  收藏  举报