Interaction requirements: improve the background interaction of information page, redux sends update data request to realize asynchronous update of user data of state tree, detects whether information supplement has been completed each time when entering the perfect information page, if it has been completed, directly jump to the path address on the state tree, if not, stay on the current page, and the supplementary information will be submitted to the database after it is successfully submitted It can jump to the corresponding routing address according to the state tree.

Core code:

(1) Click the button to execute the update method in redux:

<Button onClick={ v => { this.props.push(this.state) } }>Determine</Button>

(2) Execute the update method to send an update request to the database:

export function update(data){
    return dispatch => {
        axios.post('/user/update',data).then(res=>{
            if(res.status === 200 && res.data.code === 0){
                //success
                dispatch(authSuccess(res.data))
            }else{
                //fail
                dispatch(errorMsg(res.data.msg));
            }
        })
    }
}

(3) After the request is successful, update the status tree:

export function user(state=initState,action){
    switch(action.type){
        case AUTH_SUCCESS:
            return {...state,redirect:getRedirect(action.payload),msg:'',...action.payload};
        //......
        default:
            return state;
    }
}

(4) After the status tree is updated, judge whether this.props.redirect has a value. If it has a value, skip the route

{ this.props.redirect ? <Redirect to={this.props.redirect}></Redirect> : null }

2. User (customer) information, jump page after login (similar to the above operation)

3. Relevant front-end knowledge points used:

3-1. Database search and update:

Model.findByIdAndUpdate( id, data, (err,docs)=>{ ...... } )

3-2. Related common mongoose query database methods:

1. Model.find()

    //(1)
    MyModel.find({ name: 'john', age: { $gte: 18 }}, function (err, docs) {});

    //(2)
    var query = MyModel.find({ name: /john/i }, null, { skip: 10 });
    var promise = query.exec();
    promise.addBack(function (err, docs) {});

2. Model.findById()

    //(1)
    Adventure.findById(id, 'name length', function (err, adventure) {});

    //(2) 
    Adventure.findById(id, 'name', { lean: true }, function (err, doc) {});

3.
Model.findByIdAndDelete()
Model.findByIdAndRemove()
Model.findByIdAndUpdate()

    /*
        Parameters:
        id «Object|Number|String» value of _id to query by
        [options] «Object» optional see Query.prototype.setOptions()
        [callback] «Function»
    */   

4. Model.findOne()

    Adventure.findOne({ type: 'iphone' }, function (err, adventure) {});

5. Model.findOneAndDelete()

    A.findOneAndDelete(conditions, [options,] callback) // executes

6. Model.findOneAndRemove()

    A.findOneAndRemove(conditions, [options,] callback) // executes

7. Model.findOneAndUpdate()

    var query = { name: 'borne' };
    Model.findOneAndUpdate(query, { name: 'jason bourne' }, [options,] callback)

4. Several ways of react related binding events: (pay attention to function body scope)

<button onClick={this.handleClick.bind(this,'test')}>Test</button>
<button onClick={::this.handleClick}>Test</button>
<button onClick={this.handleClick}>Test</button>
<button onClick={()=>this.handleClick()}>Test</button>