持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

前言

点击用户头像进入主页后可以点击编辑设置，从而修改用户信息，注意用户email是不可以被修改的，因为email是初始时注册所需要唯一验证码的，只可以修改其他字段。

正文

更新个人资料

当点击修改按钮时进入setting页面，当输入应该修改的username,password,bio,avatar等时进行回显操作，即将信息同步到reducer仓库中。

写好提交方法：

  onSubmitForm = (email, username, avatar,bio, password) => (e) => {
        e.preventDefault()
        let user  ={email,username,password,avatar,bio}
        console.log(user,"user");
        if(!user.password){
            delete user.password // 没修改 不要提交
        }
        this.props.onUpdateUser(user)
      }

将输入后同步的用户修改信息传递至提交方法的参数中，调用action指令。

//行为增强
  const mapDispatch = dispatch => {
    return {
    onUpdateUser: (user) => dispatch(action.updateSubmit(user)),
    }
  }

回到action中书写网络请求：

export const updateSubmit=(user)=>{
    return async(dispatch,getState)=>{
        try {
            const result = await request.user.update(user) //调用网络请求update
            dispatch({type:constant.USER_UPDATE_RESULT,result})
        } catch (error) {
            dispatch({type:constant.USER_UPDATE_RESULT,result:{status:0,message:error.message,errors:error.errors}})
        }
    }
}

封装api:

 update:(user)=>apiClient.put("/users",{user})

在action中调用该update方法，请求后端的接口，将获取到的用户所有输入的数据封装成user对象一同传入至update中充当body。

去reducer中接收请求结果并进行类型判断：

请求成功后将修改后的个人数据同步到localstorage中，特别是token，必须要重新更新的。

 case constant.USER_UPDATE_RESULT: //更新用户信息
            if(action.result.status===1){
              //  更新后用户信息 同步本地 localstorage
              savaData("currentUser",action.result.data)
              savaData("token",action.result.data.token)
              return {...state,...action.result.data}
            }else{
              return {...state,errors:action.result.message}
            }

更新之后也要将界面回显所使用的用户信息更新一下：

  // 更新后用户信息 也要同步仓库 store
  state.currentUser = action.result.data

优化：

当点击用户setting页面时自动信息回显，将数据库中信息回显至页面中。

该操作需要在app根组件挂载时，即初始状态时就要更新：

在app根组件中增强行为，只要页面渲染，就要维护该登陆状态，且更新用户信息。

 case constant.USER_SYNC_RESULT:  // localstorage只要有登录信息，就一直维护登陆状态
const currentUser = action.result;
console.log("初始状态更新");
return {...state,currentUser,...currentUser} //采用展开并覆盖的方式

退出登录

点击退出按钮，去除登陆状态，从localstorage中移除。并设置为仓库中init状态

//封装从localstorage中的移除方法
export const deleteData=(key)=>{
    localStorage.removeItem(key)
}

点击按钮时触发action中退出指令，然后回到reducer中更新退出状态。

 case constant.USER_SETTING_LOGOUT: //退出
            //清除 currentUser & token 内存信息 清除 恢复初始数据
            state = iniState
            // localstorage 清除
            deleteData('currentUser')
            deleteData('token')
            return {...state,redirect:'/login'} //重定向至登陆页面

17-blog-前端更新资料+退出登录

前言

正文

更新个人资料

退出登录