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 也 ...
随机推荐
- 基于递归的BFS(Level-order)
上篇中学习了二叉树的DFS深度优先搜索算法,这次学习另外一种二叉树的搜索算法:BFS,下面看一下它的概念: 有些抽象是不?下面看下整个的遍历过程的动画演示就晓得是咋回事啦: 了解其概念之后,下面看下如 ...
- 【CQOI2017】老C的键盘
Description https://loj.ac/problem/3023 一句话题意:给你一棵完全二叉树,每条边有一个方向,求这棵树有多少种不同的拓扑序. Solution 简化题意后,其实就是 ...
- Python&Selenium 关键字驱动测试框架之数据文件解析
摘要:在关键字驱动测试框架中,除了PO模式以及一些常规Action的封装外,一个很重要的内容就是读写EXCEL,在团队中如何让不会写代码的人也可以进行自动化测试? 我们可以将自动化测试用例按一定的规格 ...
- 在java的xml文件配置数据库URL地址时提示The reference to entity "characterEncoding" must end with the ';' delimiter.错误信息
配置数据库的URL<property name="url" value="jdbc:mysql://127.0.0.1:3306/micro_message&quo ...
- Java中wait()与notify()理解
通常,多线程之间需要协调工作.例如,浏览器的一个显示图片的线程displayThread想要执行显示图片的任务,必须等待下载线程 downloadThread将该图片下载完毕.如果图片还没有下载完,d ...
- python 上传多文件
后台 import json from django.shortcuts import render,HttpResponse,HttpResponseRedirect import os impor ...
- mysql 主从复制不一致,不停库不锁表恢复主从同步
注意: 进行此操作时,确认在之前已经开启了MySQL的bin-log日志,如果没有则无法实现 为了安全考虑,我们授权一个用户进行数据备份: [root@7con ] mysql -uroot -p m ...
- 单独使用ibatis做事物控制。
当项目中,只使用到了ibatis而没有使用spring来作为事物控制的时候,可以这样写: try { Reader reader = Resources.getResourceAsReader(&qu ...
- 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
在微信小程序开发中,当在CSS中使用背景图片格式为png时就会出现: 只要把png格式改掉就可以或者在<image/>标签里面写,我实测用JPG格式和把图片转成base64是没问题的.
- CMake编译OpenCV
使用CMake来编译OpenCV,以匹配自己使用的VS版本. 主要有两步: CMake编译OpenCV源码得到OpenCV.sln工程文件. VS编译OpenCV.sln. 以最新的cmake-3.1 ...