关于react redux概念性的东西可以阅读Redux中文文档和阮一峰老师的redux入门教程,但是实践出真知,所以上手才是最重要的,下面就是基于redux的实现,请看截图:
分两块描述,先说登陆,登陆的时候,我们需要拿到登陆信息,也就是token,然后在获取购物车相关信息的时候带上token去请求数据,
购物车,我们需要实时的改变购物车的数量,使得下方购物车数量显示正确,当然上面的截图只是拿到了数量,但是没显示到下方的导航栏上,自己加上即可,比较简单
先分析需求,登陆时调接口,拿到token值,加载图相应显示与隐藏,登陆成功跳转到首页(其他页面一样),保存token值
在login.js文件中,当用户点击登陆时走对应的方法,我这里拟定是buttonRegisterOrLoginAction方法,下面截图:
import {performLoginAction} from '../../actions/LoginAction'
//用户登录/注册
buttonRegisterOrLoginAction(position) {
const {navigator, dispatch} = this.props;
if (position === 0) {
//用户登录
if (username === '') {
toastShort('用户名不能为空~');
return;
}
if (password === '') {
toastShort('密码不能为空~');
return;
}
//调用登陆接口,获取token,并保持状态
dispatch(performLoginAction(username, password));
} else if (position === 1) {
//用户注册
}
}
判断完不能为空,从props中拿到dispatch,分发到相应的action,并把参数传入,在action里面,我们做网络请求以及逻辑处理,

本文介绍了如何使用React Native结合Redux实现登录和购物车功能。通过登录获取token,并在购物车模块中实时更新商品数量。在登录流程中,详细讲解了从用户触发登录操作,到Reducer处理store,再到组件更新和页面跳转的全过程。最后在应用入口统一处理系统适配,确保功能正常运行。
991

被折叠的 条评论
为什么被折叠?



