ReactNative中使用Redux架构总结


Posted in Javascript onDecember 15, 2017

本文介绍了ReactNative中使用Redux架构总结,分享给大家。具体如下:

使用Redux也有一段时间了。总结一下。

为什么要使用Redux?

背景:

  1. RN的state(可变,子组件不可见)和props(不可变,子组件可见)的设计,在面对大型项目时候,容易因为不经意修改state造成状态混乱,组件渲染错误
  2. RN使用了Virtual DOM,不需要Target绑定->Action修改UI属性,只要当状态变化,render新状态下的组件,数据单向传递,而MVC的设计模式存在双向数据流。
  3. RN不易进行测试,Redux提供了非常方便的mock测试方式。

Redux开发

开发环境

  1. 安装Redux: ‘npm install ?save redux'
  2. 安装React Native和Redux绑定库:npm install ?save react-redux
  3. 安装Redux Thunk异步Action中间件:npm install ?save redux-thunk

三个原则

单一数据源

整个应用的 state 被储存在一个对象树中,对象树存在于唯一的 store 中。store中的 state 绑定到组件

State 是只读的

惟一改变 state 的方法就是触发 action。action 是一个含有 type 属性的普通JS对象,type 可以用常量表示事件。

使用纯函数来执行修改

编写 reducers 来描述对应action如何修改 state 。一般可以用 switch(action.type) 来处理,无副作用

使用

react-redux提供了connect和Provider。

1.Provider是顶层的分发点,属性就是Store,将State分发给所有被connect的组件

2.connect:接受两个参数:一个是mapStateToProps或者mapDispatchToProps,一个是要绑定的组件本身。

Store

Store 就是把 Reducer 和 action 联系到一起的对象。Store 有以下职责:

  1. 维持应用的 state?类似数据库,存储应用的所有state。
  2. 提供 getState() 方法。获取 所有的当前state;
  3. 提供 dispatch(action) 方法更新 state,相当于存入数据库,存入action来改变state。
  4. 通过 subscribe(listener) 注册监听器。

Store本质上是一个对象,它以树的形式保存了整个应用的State。并提供了一些方法。例如getState( ) 和 dispatch( )。

Redux应用只有惟一一个Store。

Store通过createStore方法来创建,根据整个应用的根Reducer的初始State。

代码如下:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';//异步
import reducers from './reducers';
const Store = applyMiddleware(thunk)(createStore)(reducers);
export default Store;

Reducers

Action只是描述了有事情发生了这一事实,并没有指明应用如何更新state。这是reducer要做的事情。

Reducer的本质是一个函数,并且是一个纯函数。没有任何副作用。简单来讲Reducer只负责做一件事,就是根据接收到的action和state来修改Store中的state:

(state, action) => newState

一般实现的时候,通过switch(action.type) 来判断不同的Action,default为旧state。同时可以定义初始状态。

代码:

import { combineReducers } from 'redux';
const newState = (state = {}, action = {}) => {
 switch (action.type) {
  case ActionTypes.CSTATE:
   return { ...state, ...action.state };
  case '_DPDATACHANGE_':
   return {...state, ...action.dpState};
  default:
   return state;
 }
};
//Reducer 合并
export default combineReducers({
 newState,
});

注意:返回的是新state,如果需要保留部分旧state值,使用…state(ES7的对象展开语法,对对象会浅拷贝对应属性,这里等价于Object.assign({}, state, newState)),而如果合并state的话只会合并一层,对复杂state需要手动合并。

Action

Action是一个普通JS对象,至少包括一个type属性代表事件,其他属性可以用来传递数据。实践上对一个流程定义一个函数,流程可以包括网络请求,最后返回Action,这个函数叫Action Creator。

代码:Store可以dispatch这个Action,action的type表示标识符,state是它携带的数据。

export const newState = state => {
 Store.dispatch({
  type: ActionTypes.CSTATE,
  state,
 });
};

持久化

当触发action时根据其reducer key恢复数据,然后只需要在应用启动时分发action,这也很容易抽象成可配置的拓展服务,实际上三方库redux-persist已经为我们做好了这一切。

在Action中可以代码如下:

export const getStorage = async (key) => {
 const d = await AsyncStorage.getItem(key);
 return JSON.parse(d);
};
export const setStorage = (key, value) => {
 AsyncStorage.setItem(key, JSON.stringify(value));
};

connect

通过- 提供 getState() 方法。获取 所有的当前state

通过connect,绑定需要的state以及Action Creator到你的组件的props上,这样组件就可以通过props来调用Action Creator,或者根据不同props来render()不同的组件。

代码:

mapStateToProps({ newState }) {
      const value = newState[name];//name: newState.name
      return {
       name,
      };
     },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
js读写(删除)Cookie实例详解
Apr 17 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 #Javascript
vue实现验证码输入框组件
Dec 14 #Javascript
基于滚动条位置判断的简单实例
Dec 14 #Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 #Javascript
ES6/JavaScript使用技巧分享
Dec 14 #Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 #Javascript
浅析JS抽象工厂模式
Dec 14 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Django中FilePathField字段的用法
2020/05/21 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
人事局接收函
2015/01/31 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Python连续赋值需要注意的一些问题
2021/06/03 Python