React Native使用Redux总结
1>npm安装redux:
"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0"
2>大致结构目录如下:
3>ActionTypes.js:
在使用redux
过程中,需要给每个动作添加一个actionTypes
类型,可以说是标示;
// 接收数据
export const RECEIVE_BEAUTY_LIST = 'RECEIVE_BEAUTY_LIST';
export const BACKIMAGE_URL = 'BACKIMAGE_URL';
4>Store: 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
5>State:Store
对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。
当前时刻的 State,可以通过store.getState()
拿到。
/**
* 创建Store,整合Provider
* @flow
*/
import thunk from 'redux-thunk';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './../Reducers/RootReducers'; let store = createStore(rootReducer, {}, compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)) export default store;
6>Actions:
State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。
Action 是一个对象。其中的type
属性是必须的,表示 Action 的名称。
import * as types from './../ActionTypes'; import {
AsyncStorage,
} from 'react-native'; let KEY = 'PSMeiTuan';
export function backImage() {
return dispatch => {
return AsyncStorage.getItem(KEY,(Error,result)=>{
if (result === null){
// 使用dispatch存储值
dispatch(getBackImage('img'))
} else {
console.log('获取图片成功' + result);
dispatch(getBackImage(result));
}
});
}
}; export function getBackImage(imageURL) {
return {
type: types.BACKIMAGE_URL,
imageURL // 键值相等可以直接这么写
}
}
7>Reducers:
Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
import * as types from './../ActionTypes'; const initialState = {
loading: false,
beauty: [],
imageURL: 'https://ws1.sinaimg.cn/large/610dc034ly1fgllsthvu1j20u011in1p.jpg'
} export default function beautyReducers(state = initialState, action) {
switch (action.type) {
case types.RECEIVE_BEAUTY_LIST:
console.log('收到消息');
return Object.assign({}, state, {
loading: true,
beauty: action.beauty
});
case types.BACKIMAGE_URL:
return Object.assign({}, state, {
imageURL:action.imageURL
});
default:
return state;
}
}
8>connect
连接页面和Reducer:<这里只记录一个页面选择图片,使用redux保存图片,另一个页面展示选择的图片>
BeautyPage.js选择图片页面:
// 导入相关类
import { connect } from 'react-redux';
import {fetchBeautyGirlData} from './../../../Redux/Actions/BeautifulGirlAction';
import { backImage, getBackImage } from './../../../Redux/Actions/BackImageAction';;
// 连接reducer
export default connect((state) => {
const { beautyReducers } = state; // 这里的beautyReducers注意和对应的reducer文件export的类相同
return {
beautyReducers
}
}, { backImage,getBackImage, fetchBeautyGirlData })(BeautyPage) // 这里是对应的存值的方法,BeautyPage是导出当前模块
// 点击图片,保存图片
onImageClick(item) {
// alert(item.url);
const {navigate,goBack,state} = this.props.navigation;
// 方法一: 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
// state.params.callback(item.url);
let KEY = 'PSMeiTuan';
AsyncStorage.setItem(KEY,item.url,(error)=>{
if (error){
console.log('存储失败' + error);
} else {
console.log('存储成功');
// 方法二: 这里可以发送通知到首页
// DeviceEventEmitter.emit('SHITUIMAGE',url);
// 方法三:
this.props.getBackImage(item.url);
}
});
// 返回当前页
goBack();
}
ReduxDemo.js对图片进行显示:
import { backImage,getBackImage } from './../../../Redux/Actions/BackImageAction';
连接reducer:
export default connect((state) => {
const { beautyReducers } = state;
return {
beautyReducers
};
},{ backImage,getBackImage })(ReduxDemo)
/**
* 此页面调用顺序:
* 1>render;
* 2>componentDidMount;
* 3>componentWillReceiveProps;
* 4>render;
*/
// 使用
componentDidMount(){
console.log('componentDidMount');
// 使用backImage方法。
this.props.backImage();
} componentWillReceiveProps(nextProps){
console.log('componentWillReceiveProps');
// 最开始的值
console.log(nextProps.beautyReducers);
// 之前存储的值
console.log(this.props.beautyReducers); const { navigate } = this.props.navigation;
const { imageURL } = nextProps.beautyReducers; if (this.props.beautyReducers.imageURL !== imageURL){
if (imageURL) {
imageUri = imageURL;
}
}
}
暂时的理解就是Redux可以用来数据请求的时候以state存储数据,某个页面值改变进行值的存储,以实现不同页面都可以很轻松的取得数据.
暂时只实现和掌握了简单的使用,高级用法后面学习积累!!!
React Native使用Redux总结的更多相关文章
- [RN] React Native 使用 Redux 比较详细和深刻的教程
React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http:/ ...
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- react native 之 redux 使用套路
redux是什么?他是一个state容器 redux的运作方式是怎样的? 接入方式: 1. npm install 下列内容: npm install --save redux npm install ...
- react native 之 redux
第一章 认识redux 说的通俗且直白一点呢,就是redux提供了一个store,独立的一个内存区,然后放了一些state,你可以在任何component中访问到state,这些state要更改怎么 ...
- [转] 学习React Native必看的几个开源项目
http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...
- 学习React Native必看的几个开源项目
学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...
- 从React Native到微服务,落地一个全栈解决方案
Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...
- react native redux saga增加日志功能
redux-logger地址:https://github.com/evgenyrodionov/redux-logger 目前Reac native项目中已经使用redux功能,异步中间件使用red ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
随机推荐
- Some ML Tutorials
VAE: What-is-variational-autoencoder-vae-tutorial Variational-autoencoders-explained Building variat ...
- github仓库管理项目
一,建立本地git仓库 首先,git要求使用者必须提供自己的身份标识,为此我们需要在git bash中执行以下命令: git config --global user.name 'aa.Tessst ...
- python+Appium自动化:H5元素定位
问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...
- 微信小程序实现连接蓝牙设备跑步APP
背景 微信小程序兴起,有变成超级APP的趋势,通过微信提供的小程序api,可以通过微信调用到手机原生的支持. 目标 通过微信小程序实现来实现跑步类App的功能. 需求分析 跑步类App需要的两个核心的 ...
- So easy RHCE
1.将VGSRV 拉伸为100MB VGSRV这个是逻辑卷的home分区,逻辑卷是可以随意拉伸的,但是需要注意的是拉伸之前必须使用umount卸载,否则系统会崩溃,虽然可以还原但是很麻烦,顺序不可 ...
- 《Redis 设计与实现》读书笔记(三)
多机数据库实现 十五 .复制 从服务器通过命令 slaveof 127.0.0.1 6000 成为主服务器的从服务器.然后执行复制操作,保持自己的状态和主服务器一样 1.理论 同步 成为从服务器后的同 ...
- numba初体验
numba初体验 今天在知乎上发现了一个很神奇的包numba,可以用jit的方式大幅提高计算型python代码的效率,一起来看一下 安装 numba的安装方式很简单,使用pip或者anacoda都可以 ...
- BZOJ 2013 : [Ceoi2010]A huge tower / Luogu SP6950 CTOI10D3 - A HUGE TOWER
传送门 菜鸡.jpg CODE #include <bits/stdc++.h> using namespace std; const int MAXN = 620005; int n, ...
- 使用Jieba提取文章的关键词
import jieba.analyse as analyse import matplotlib.pyplot as plt from wordcloud import WordCloud data ...
- 如何从word中直接复制图片到编辑器中
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...