react中手动重置redux
前段时间使用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的更多相关文章
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- react中使用redux简易案例讲解
为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...
- react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法
在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- react中redux的理解
定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...
- 在react中使用redux并实现计数器案例
React + Redux 在recat中不使用redux 时遇到的问题 在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实 ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
随机推荐
- shiro 核心单词
subject [ˈsʌbdʒekt] 主体principal [ˈprɪnsəpəl] 身份信息credential ...
- PyQt4(简单计算器)
随便写写 import sys import calc from PyQt4 import QtCore, QtGui class MyWidget(QtGui.QWidget): num1 = &q ...
- 【转】虚拟机安装Ubuntu的上网设置(有线网络和无线网络)
虚拟机下ubuntu共享方式上网: 一. 有线网络 在有线网络的条件下,vmware的安装非常简单,上网方式几乎不用怎么设置(默认NAT模式) 如果默认情况下不能上网,则按以下步骤尝试: *** ...
- Enum,Int,String的互相转换
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基类 ...
- [域|Domain] The trust relationship between this workstation and the primary domain failed 此工作站和主域间的信任关系失败
PS> $cred = Get-Credential domain.sample.com;Reset-ComputerMachinePassword -Credential $cred -Ser ...
- Jmeter入门--工具组成和线程组
1.Jmeter工具组成部分: 资源生成器:用于生成测试过程中服务器,负载机的资源代码.(LoadRunner中的VuGen) 用户运行器:通常是一个脚本运行引擎,根据脚本要求模拟指定的用户行为.(L ...
- Ardunio控制RGB的LED灯显示彩虹渐变色.
由于我使用的是共阴极的RGB LED,如果你的是共阳极的,接线的时候要注意一下. 其他没什么不同 //定义RGB色彩的输出I/O ; ; ; //标记颜色变化的方式,增加值还是减小值 bool red ...
- 第一篇,编译生成libcef_dll_wrapper
因为工作原因需要在程序里面嵌入地图,在网上看了百度地图和高德地图都没有提供c++的接口,提供有web接口,那只好在程序里面嵌入web控件了,第一想到的是web browser控件,接着脑海里又想到IE ...
- java枚举学习入门
一.前言 在java编程过程中,我们通常需要定义一些固定数量的常量,在jdk1.5以前,通常的做法是定义一个静态常量类,但自jdk1.5后,java引入了枚举(关键字enum,全称为 enumera ...
- ORACLE数据库入门再在屋里坐会
一.数据库简介 数据库概述 数据库(database)是按照数据结构来组织,存储和管理数据的仓库,它产生与距今五十年前. 简单来说是本身可视为电子化的文件柜--存储电子文件的处所,用户可以对文件中的数 ...