Redux 信息完善交互

交互需求:完善信息页面后台交互,redux发送更新数据请求,实现异步更新状态树的用户数据,在每次进入完善信息页面时,检测是否已经完成信息补充,如果已完成,直接跳转到状态树上的路由地址,如过没有,就留在当前页面,补充信息成功提交到数据库后才能根据状态树跳转到对应的路由地址。


核心代码:

(1)点击按钮,执行redux中的update方法:

(2)执行update方法,向数据库发出更新请求:

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

(3)请求成功后,更新状态树:

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)状态树更新后,判断 this.props.redirect 是否有值,有值就跳转路由

 

{ this.props.redirect ?  : null }


2. 用户(客户)信息、 登录后跳转页面 ( 类似于上面的操作 )

3. 所用到的相关前端知识点:

  3-1. 数据库查找并且更新:

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

  3-2. 相关常用mongoose查询数据库方法:

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) // executes6. Model.findOneAndRemove()A.findOneAndRemove(conditions, [options,] callback) // executes7. Model.findOneAndUpdate()var query = { name: 'borne' };Model.findOneAndUpdate(query, { name: 'jason bourne' }, [options,] callback)

4. react相关绑定事件的几种方式:( 注意函数体作用域 )





 


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部