1>npm安装redux:

  1. "react-redux": "^5.0.5",
  2. "redux": "^3.7.1",
  3. "redux-thunk": "^2.2.0"

2>大致结构目录如下:

3>ActionTypes.js:

在使用redux过程中,需要给每个动作添加一个actionTypes类型,可以说是标示;
  1. // 接收数据
  2. export const RECEIVE_BEAUTY_LIST = 'RECEIVE_BEAUTY_LIST';
  3. export const BACKIMAGE_URL = 'BACKIMAGE_URL';

4>Store: 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。

5>State:Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。

当前时刻的 State,可以通过store.getState()拿到。

  1. /**
  2. * 创建Store,整合Provider
  3. * @flow
  4. */
  5. import thunk from 'redux-thunk';
  6. import { createStore, applyMiddleware, compose } from 'redux';
  7. import rootReducer from './../Reducers/RootReducers';
  8.  
  9. let store = createStore(rootReducer, {}, compose(
  10. applyMiddleware(thunk),
  11. window.devToolsExtension ? window.devToolsExtension() : f => f
  12. ))
  13.  
  14. export default store;

6>Actions:

State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。

  1. import * as types from './../ActionTypes';
  2.  
  3. import {
  4. AsyncStorage,
  5. } from 'react-native';
  6.  
  7. let KEY = 'PSMeiTuan';
  8. export function backImage() {
  9. return dispatch => {
  10. return AsyncStorage.getItem(KEY,(Error,result)=>{
  11. if (result === null){
  12. // 使用dispatch存储值
  13. dispatch(getBackImage('img'))
  14. } else {
  15. console.log('获取图片成功' + result);
  16. dispatch(getBackImage(result));
  17. }
  18. });
  19. }
  20. };
  21.  
  22. export function getBackImage(imageURL) {
  23. return {
  24. type: types.BACKIMAGE_URL,
  25. imageURL // 键值相等可以直接这么写
  26. }
  27. }

7>Reducers:

Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

  1. import * as types from './../ActionTypes';
  2.  
  3. const initialState = {
  4. loading: false,
  5. beauty: [],
  6. imageURL: 'https://ws1.sinaimg.cn/large/610dc034ly1fgllsthvu1j20u011in1p.jpg'
  7. }
  8.  
  9. export default function beautyReducers(state = initialState, action) {
  10. switch (action.type) {
  11. case types.RECEIVE_BEAUTY_LIST:
  12. console.log('收到消息');
  13. return Object.assign({}, state, {
  14. loading: true,
  15. beauty: action.beauty
  16. });
  17. case types.BACKIMAGE_URL:
  18. return Object.assign({}, state, {
  19. imageURL:action.imageURL
  20. });
  21. default:
  22. return state;
  23. }
  24. }

8>connect连接页面和Reducer:<这里只记录一个页面选择图片,使用redux保存图片,另一个页面展示选择的图片>

BeautyPage.js选择图片页面:

  1. // 导入相关类
    import { connect } from 'react-redux';
  2. import {fetchBeautyGirlData} from './../../../Redux/Actions/BeautifulGirlAction';
  3. import { backImage, getBackImage } from './../../../Redux/Actions/BackImageAction';;
  1. // 连接reducer
  2. export default connect((state) => {
  3. const { beautyReducers } = state; // 这里的beautyReducers注意和对应的reducer文件export的类相同
  4. return {
  5. beautyReducers
  6. }
  7. }, { backImage,getBackImage, fetchBeautyGirlData })(BeautyPage) // 这里是对应的存值的方法,BeautyPage是导出当前模块
  1. // 点击图片,保存图片
  2. onImageClick(item) {
  3. // alert(item.url);
  4. const {navigate,goBack,state} = this.props.navigation;
  5. // 方法一: 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
  6. // state.params.callback(item.url);
  7. let KEY = 'PSMeiTuan';
  8. AsyncStorage.setItem(KEY,item.url,(error)=>{
  9. if (error){
  10. console.log('存储失败' + error);
  11. } else {
  12. console.log('存储成功');
  13. // 方法二: 这里可以发送通知到首页
  14. // DeviceEventEmitter.emit('SHITUIMAGE',url);
  15. // 方法三:
  16. this.props.getBackImage(item.url);
  17. }
  18. });
  19. // 返回当前页
  20. goBack();
  21. }

ReduxDemo.js对图片进行显示:

  1. import { backImage,getBackImage } from './../../../Redux/Actions/BackImageAction';

连接reducer:

  1. export default connect((state) => {
  2. const { beautyReducers } = state;
  3. return {
  4. beautyReducers
  5. };
  6. },{ backImage,getBackImage })(ReduxDemo)
  1. /**
  2. * 此页面调用顺序:
  3. * 1>render;
  4. * 2>componentDidMount;
  5. * 3>componentWillReceiveProps;
  6. * 4>render;
  7. */
  8. // 使用
  9. componentDidMount(){
  10. console.log('componentDidMount');
  11. // 使用backImage方法。
  12. this.props.backImage();
  13. }
  14.  
  15. componentWillReceiveProps(nextProps){
  16. console.log('componentWillReceiveProps');
  17. // 最开始的值
  18. console.log(nextProps.beautyReducers);
  19. // 之前存储的值
  20. console.log(this.props.beautyReducers);
  21.  
  22. const { navigate } = this.props.navigation;
  23. const { imageURL } = nextProps.beautyReducers;
  24.  
  25. if (this.props.beautyReducers.imageURL !== imageURL){
  26. if (imageURL) {
  27. imageUri = imageURL;
  28. }
  29. }
  30. }

暂时的理解就是Redux可以用来数据请求的时候以state存储数据,某个页面值改变进行值的存储,以实现不同页面都可以很轻松的取得数据.

暂时只实现和掌握了简单的使用,高级用法后面学习积累!!!

React Native使用Redux总结的更多相关文章

  1. [RN] React Native 使用 Redux 比较详细和深刻的教程

    React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http:/ ...

  2. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  3. react native 之 redux 使用套路

    redux是什么?他是一个state容器 redux的运作方式是怎样的? 接入方式: 1. npm install 下列内容: npm install --save redux npm install ...

  4. react native 之 redux

    第一章  认识redux 说的通俗且直白一点呢,就是redux提供了一个store,独立的一个内存区,然后放了一些state,你可以在任何component中访问到state,这些state要更改怎么 ...

  5. [转] 学习React Native必看的几个开源项目

    http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...

  6. 学习React Native必看的几个开源项目

    学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...

  7. 从React Native到微服务,落地一个全栈解决方案

    Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...

  8. react native redux saga增加日志功能

    redux-logger地址:https://github.com/evgenyrodionov/redux-logger 目前Reac native项目中已经使用redux功能,异步中间件使用red ...

  9. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

随机推荐

  1. 基于递归的BFS(Level-order)

    上篇中学习了二叉树的DFS深度优先搜索算法,这次学习另外一种二叉树的搜索算法:BFS,下面看一下它的概念: 有些抽象是不?下面看下整个的遍历过程的动画演示就晓得是咋回事啦: 了解其概念之后,下面看下如 ...

  2. 【CQOI2017】老C的键盘

    Description https://loj.ac/problem/3023 一句话题意:给你一棵完全二叉树,每条边有一个方向,求这棵树有多少种不同的拓扑序. Solution 简化题意后,其实就是 ...

  3. Python&Selenium 关键字驱动测试框架之数据文件解析

    摘要:在关键字驱动测试框架中,除了PO模式以及一些常规Action的封装外,一个很重要的内容就是读写EXCEL,在团队中如何让不会写代码的人也可以进行自动化测试? 我们可以将自动化测试用例按一定的规格 ...

  4. 在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 ...

  5. Java中wait()与notify()理解

    通常,多线程之间需要协调工作.例如,浏览器的一个显示图片的线程displayThread想要执行显示图片的任务,必须等待下载线程 downloadThread将该图片下载完毕.如果图片还没有下载完,d ...

  6. python 上传多文件

    后台 import json from django.shortcuts import render,HttpResponse,HttpResponseRedirect import os impor ...

  7. mysql 主从复制不一致,不停库不锁表恢复主从同步

    注意: 进行此操作时,确认在之前已经开启了MySQL的bin-log日志,如果没有则无法实现 为了安全考虑,我们授权一个用户进行数据备份: [root@7con ] mysql -uroot -p m ...

  8. 单独使用ibatis做事物控制。

    当项目中,只使用到了ibatis而没有使用spring来作为事物控制的时候,可以这样写: try { Reader reader = Resources.getResourceAsReader(&qu ...

  9. 本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签

    在微信小程序开发中,当在CSS中使用背景图片格式为png时就会出现: 只要把png格式改掉就可以或者在<image/>标签里面写,我实测用JPG格式和把图片转成base64是没问题的.

  10. CMake编译OpenCV

    使用CMake来编译OpenCV,以匹配自己使用的VS版本. 主要有两步: CMake编译OpenCV源码得到OpenCV.sln工程文件. VS编译OpenCV.sln. 以最新的cmake-3.1 ...