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 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
简单通过settimeout看javascript的运行机制
May 10 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php上传文件的增强函数
2010/07/21 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python变量不能以数字打头详解
2016/07/06 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python3中数组逆序输出方法
2020/12/01 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
PHP面试题大全
2015/10/16 面试题
软件工程师岗位职责
2013/11/16 职场文书
学生安全教育材料
2014/02/14 职场文书
预备党员综合考察材料
2014/05/31 职场文书
团队精神口号
2014/06/06 职场文书
街道社区活动报告
2015/02/05 职场文书