react native基于redux架构实现登陆和购物车

最新推荐文章于 2024-10-10 09:36:18 发布

bestlbw

最新推荐文章于 2024-10-10 09:36:18 发布

阅读量3.8k

点赞数 1

分类专栏： react-native探险文章标签： react-native redux 实例

本文链接：https://blog.csdn.net/bestlbw/article/details/55852513

版权

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

摘要由CSDN通过智能技术生成

关于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) {
        //用户注册
    }
}

判断完不能为空