前段时间使用redux在react-native中,安卓后退两次关闭后redux未清空的问题,一直觉得处理的不够优雅,没有根本解决问题。

后来发现再退出登录后,也有部分数据因为redux的逻辑处理数据缓存问题被留了下来,造成一些意料之外的问题,于是要彻底解决重置redux的办法。

我的解决方法是,写一个action用来处理退出登录,每个reducer都监听这个type,return初始值。

//action
export const LOGIN_OUT = 'LOGIN_OUT'; export const loginOut = () => {
return {
type: LOGIN_OUT
}
}

  

//reducer
import * as User from '../actions/userAction'; const user = {
type: 0,
name: '',
uid: '',
phone: ''
}
export default (state = user, action) => {
switch (action.type) { ...... case User.LOGIN_OUT:
return user
break;
default:
return state;
} }
//其他reducer
import { LOGIN_OUT } from '../actions/userAction'; const finance = {
...
}
export default (state = finance, action) => {
switch (action.type) { ...... case LOGIN_OUT:
return finance
break;
default:
return state;
} }
//退出登录时处理逻辑
export default connect(
(state) => ({}),
(dispatch) => ({
loginOut: () => {
dispatch(loginOut());
Storage.remove({ key: 'user' });
resetRouter('Login');
}
})
)(...)
//rn中后退2次逻辑处理
onBackAndroid = () => {
const routers = this.navigator._navigation.state.routes;
if (routers.length > 1) {
this.navigator.pop();
return true;
} else {
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
Store.dispatch(loginOut());//redux重置
return false;
}
this.lastBackPressed = Date.now();
ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
return true;
}
};
 export const LOGIN_OUT = 'LOGIN_OUT';

 export const loginOut = () => {
return {
type: LOGIN_OUT
}
}

react中手动重置redux的更多相关文章

  1. react系列(五)在React中使用Redux

    上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...

  2. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. react中使用redux简易案例讲解

    为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...

  4. react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法

    在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...

  5. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  6. react中redux的理解

    定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...

  7. 在react中使用redux并实现计数器案例

    React + Redux 在recat中不使用redux 时遇到的问题 在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实 ...

  8. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  9. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

随机推荐

  1. 【涨姿势】Prince2和PMP的区别,大多数人都没搞清楚!

    项目管理领域有2个流行的知识体系:      ☑ 一个是美国项目管理协会(PMI)开发的“项目管理知识体系(PMBOK,Project Management Body of Knowledge)”,目 ...

  2. [转载]敏感词过滤,PHP实现的Trie树

    原文地址:http://blog.11034.org/2012-07/trie_in_php.html 项目需求,要做敏感词过滤,对于敏感词本身就是一个CRUD的模块很简单,比较麻烦的就是对各种输入的 ...

  3. MySQL中如何实现select top n

    用惯了access mssql server的朋友,可能在用mysql查询前N条记录时,习惯的使用select top n 形式的语句,在这里说明一下,mysql没有此语法,mysql用limit来实 ...

  4. 干货:如何使用N点虚拟管理系统?

    N点虚拟主机管理系统怎么用呢?最近有许多朋友问我关于这款虚拟主机管理系统如何使用?在讲如何使用N点虚拟主机管理系统之前,我们先来了解一下N点虚拟主机管理系统的介绍. ​      N点虚拟主机管理系统 ...

  5. Oracle常见等待事件

    1Buffer busy waits从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种.常见的两种是: ·         当一个会话视图 ...

  6. 搜索菜单栏侧滑效果控件SearchView

    搜索菜单栏侧滑效果控件SearchView 本人视频教程系类   iOS中CALayer的使用 效果1: 效果2: 项目中用到的图片 bgImg@2x.png: 源码: SearchView.h + ...

  7. SQL脚本运行

    $v=New-Object -ComObject wscript.shell#也可以使用反单引号(`)字符来强制PowerShell将单引号或双引号解释为文本,0不显示命令提示符窗口$v.run(&q ...

  8. Ubuntu下安装指定版本的mysql

    1.编辑/etc/apt/sources.list和/etc/apt/sources.list.save, 手动加上deb http://archive.ubuntu.com/ubuntu trust ...

  9. XGBoost 输出特征重要性以及筛选特征

    1.输出XGBoost特征的重要性 from matplotlib import pyplot pyplot.bar(range(len(model_XGB.feature_importances_) ...

  10. 3-urllib的post请求方式

    在urllib 中,要进行post请求时,需传入相应的data值,这里通过http://www.iqianyue.com/mypost这个网站进行测试. 案例代码如下: #post 请求 import ...