Redux achieve management status -todoList

1. What redux that? 9

　　Redux is the state of management tools React

2, installation Redux: 

　　cnpm install -S redux

3. Create Store

　　We built a store in the src file, there are index, and reducer

 

Let's create store

 

 

// data (ajax may be requested) 
const defaultStaet = {
     // value of INPUT 
    for inputValue: '' ,
     // unfinished 
    listW: [],
     // completed 
    listy: [] 
} 

// derived 
Export default ( = defaultStaet State, Action) => { 
   

    return State 
}

store folder below the index was introduced reducer

import { createStore } from 'redux';
import reducer from './reducer';
export default createStore(reducer)

Overall Code

List component

React Import, {from} the Component 'REACT'
 // subassembly the Input 
Import from the Input './Input' ;
 // Store 
Import from Store './store/index' ; 

Export default class the extends the Component List { 
    constructor () { 
        Super () 
        // Get store the data in 
        the this .STATE = store.getState ()
         // monitor store, state data changed in real time 
        store.subscribe (() => {
             the this .setState (store.getState ()) 
        }) 
    } 

    / / inputValue value 
    myInputValue (E) { 
        const Action = {
            type: 'INPUT-value' , 
            value: e.target.value 
        } 
        // for each input passed to store 
        store.dispatch (Action) 
    } 

    // click Button button 
    myButtonClick () {
         // Get store input box passed in for inputValue value 
        const Action = { 
            type: 'Button-value' , 
            value: the this .state.inputValue 
        } 
        // the value is passed to Store 
        store.dispatch (Action) 
    } 

    // bind keyboard events 
    myKeyDown (E) {
         // determines whether the press is under the Enter 
        IF(e.keyCode 13 is === ) {
             // add a call event 
            the this .myButtonClick () 
        } 
    } 

    // CheckBox Click event 
    myCheckedChange (I, E) {
         IF (e.target.checked) {
             // splice cut out of the current click of 
            the let ARR = the this .state.listW.splice (I,. 1) [0 ]
             // the checked negated value 
            arr.checked =! arr.checked 
            const Action = { 
                type: 'the checked-listW' , 
                value: ARR 
            } 
            / / to pass an array of future change store
            store.dispatch (Action) 
        } the else {
             // splice cut out of the current click 
            the let ARR = the this .state.listY.splice (I,. 1) [0 ]
             // the checked negated value 
            arr.checked =! arr.checked 
            const Action = { 
                type: 'the checked-listy' , 
                value: ARR 
            } 
            // the array passed to subsequent changes Store 
            store.dispatch (Action) 
        } 
    } 

    // delete button (unfinished) 
    myButtonDeleteW (I) {
         // the current click splice cut out
        the this .state.listW.splice (I,. 1 ) 
        const Action = { 
            type: 'listW-Delete' , 
            value: the this .state.listW 
        } 
        // the number of subsequent cutting pass Store 
        store.dispatch (Action) 
    } 

    / / delete button (completed) 
    myButtonDeleteY (i) {
         // the current click splice cut out of 
        the this .state.listY.splice (i, 1 ) 
        const Action = { 
            of the type: 'listy-the delete' , 
            value: the this . state.listY 
        } 
        //After cutting the number passed to Store 
        store.dispatch (Action) 
    } 

    // click to content editable 
    myItemUpdate (E) { 
        e.target.contentEditable = to true 
    } 

    // number to focus 
    myItemBlur (I, E) {
         / / the current modified content data revising 
        the this .state.listW.splice (I,. 1, { 'value': e.target.innerHTML, 'the checked': to false }) 
        const Action = { 
            type: 'Update Item- ' , 
            value: the this .state.listW 
        } 
        // to uneditable 
        e.target.contentEditable = to false
        // the modified new array passed Store 
        store.dispatch (Action) 
    } 

    the render () { 
        return (
             <React.Fragment> 
                { / * use INPUT * / } 
                { / * The parent element method myKeyDown passed subassembly * / } 
                { / * the parent element method myButtonClick passed subassembly * / } 
                { / * the parent element in the subassembly this.state.inputValue transmitted * / } 
                { / * the parent element method myInputValue passed subassembly * / }
                 <= {the Input myKeyDown the this .myKeyDown.bind (this)} myButtonClick={this.myButtonClick.bind(this)} value={this.state.inputValue} myInputValue={this.myInputValue.bind(this)} />
                {
                    <ul>
                        <h3>正在进行 ({this.state.listW.length})</h3>
                        {/* 遍历正在进行的 */}
                        {this.state.listW.map((item, index) => {
                            return <li key={index}>
                                <input type="checkbox" checked={item.checked ? true : false} onChange={this.myCheckedChange.bind(this, index)} />
                                <span onClick={this.myItemUpdate.bind(this)} onBlur={this.myItemBlur.bind(this, index)}>{item.value}</span>
                                <button onClick={this.myButtonDeleteW.bind(this, index)}>删除</button>
                            </li>
                        })}
                    </ul>
                }
                {
                    <ul>
                        <h3>已完成 ({this.state.listY.length})</h3>
                        {/* 遍历已完成的 */}
                        {this.state.listY.map((item, index) => {
                            return <li key={index}>
                                <input type="checkbox" checked={item.checked ? true : false} onChange={this.myCheckedChange.bind(this, index)} />
                                <span>{item.value}</span>
                                <button onClick={this.myButtonDeleteY.bind(this, index)}>删除</button>
                            </li>
                        })}
                    </ul>
                }
            </React.Fragment>
        )
    }
}

Input Components

Import React, {the Component} from 'REACT' 

Export default class the Input the extends the Component { 
    the render () { 
        return (
             <div> 
                { / * value: updated in real time value * / } 
                { / * the onKeyDown keyboard event * / } 
                { / * the onChange Real-time monitoring of input value * / }
                 <input of the type = "text" value = { the this .props.value} = {onKeyDown the this .props.myKeyDown onChange = {} the this .props.myInputValue} /> 
                { / * click Add event * /}
                <button onClick={this.props.myButtonClick}>添加</button>
            </div>
        )
    }
}

reducer

// data (ajax may be requested) 
const defaultStaet = {
     // value of INPUT 
    for inputValue: '' ,
     // unfinished 
    listW: [],
     // completed 
    listy: [] 
} 

// derived 
Export default ( = defaultStaet State, Action) => {
     // iNPUT value input box 
    IF (action.type === 'iNPUT-value' ) { 
        const newState the = State
         // assigns newState.inputValue 
        newState.inputValue = action.value
         return newState 
    } 

    //Click Submit button content of 
    IF (action.type === 'button-value' ) { 
        const newState The = State
         // the value input box to push the key-value pairs, listWli. Was added to achieve 
        newState.listW.push ({ 'value': action.value, 'the checked': to false })
         return newState The 
    } 

    // click the checked, 
    IF (action.type === 'the checked-listW' ) { 
        const newState The = State
         // the current push to click listYli, achieve unfinished put out has been completed in 
        newState.listY.push (action.value)
         return newState 
    } 

    // click the checked 
    IF(action.type === 'the checked-listy' ) { 
        const newState The = State
         // the current click to push listWli, realized out into finished in unfinished 
        newState.listW.push (action.value)
         return newState the 
    } 

    // click the delete 
    IF (action.type === 'listW-delete' ) { 
        const newState the = State
         // the new array is later removed assigning listW 
        newState.listW = action.value
         return newState the 
    } 

    // click the delete 
    IF (action.type === 'listy-Delete' ) { 
        const newState The =State
         // The new array is later removed assign listy 
        newState.listY = action.value
         return newState 
    } 
    // click updates 
    IF (action.type === 'Item-Update' ) { 
        const newState = State
         // to change after assigning new array listW 
        newState.listW = action.value
         return newState the 
    } 

    return State 
}