redux-logger地址:https://github.com/evgenyrodionov/redux-logger

目前Reac native项目中已经使用redux功能,异步中间件使用redux saga,但在处理时,也需要增加redux打印日志的功能,所以需要增加redux-logger功能

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome' //router
import { Router, Scene, Tabs } from 'react-native-router-flux'; //redux
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux'; //redux logger
import logger from 'redux-logger'; //reducers
import allReducers from './src/reducers'; //containers
import HomeContainer from './src/containers/HomeContainer';
import OrderContainer from './src/containers/OrderContainer';
import MainContainer from './src/containers/MainContainer';
//user containers
import UserLoginContainer from './src/containers/user/UserLoginContainer';
import UserRegisterContainer from './src/containers/user/UserRegisterContainer';
//check containers
import StyleCheckContainer from './src/containers/check/StyleCheckContainer';
import HandmadeCheckContainer from './src/containers/check/HandmadeCheckContainer';
import SizeCheckContainer from './src/containers/check/SizeCheckContainer';
import FittingCheckContainer from './src/containers/check/FittingCheckContainer';
//storage
import storage from './src/util/tqsStorage'; //mutil language
import I18n from './src/config/i18n'; //saga
import createSagaMiddleware from 'redux-saga';
import rootSaga from './src/sagas/rootSaga'; const sagaMiddleware = createSagaMiddleware();
let store = createStore(allReducers, applyMiddleware(logger,sagaMiddleware)); //run all saga function
sagaMiddleware.run(rootSaga); export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
}
render() {
return (
<Provider store={store}>
<Router>
<Scene key='root'>
<Scene key='UserLogin' component={UserLoginContainer} title={I18n.t('App.UserLogin_Title')} initial={true} hideNavBar={true} />
<Scene key='UserRegister' component={UserRegisterContainer} title={I18n.t('App.UserRegister_Title')} />
<Scene key='Home' component={HomeContainer} title={I18n.t('App.Home_Title')} hideNavBar={true} />
<Scene key='Order' component={OrderContainer} title={I18n.t('App.Order_Title')} hideNavBar={true} />
<Scene key='Main' component={MainContainer} title={I18n.t('App.Main_Title')} hideNavBar={true} /> <Scene key='StyleCheck' component={StyleCheckContainer} title={I18n.t('App.StyleCheck_Title')} hideNavBar={true} />
<Scene key='HandmadeCheck' component={HandmadeCheckContainer} title={I18n.t('App.HandmadeCheck_Title')} hideNavBar={true} />
{/* <Scene key='FittingCheck' component={FittingCheckContainer} title={I18n.t('App.UserRegister_Title')} hideNavBar={true} />
<Scene key='FittingCheck' component={FittingCheckContainer} title={I18n.t('App.UserRegister_Title')} hideNavBar={true} /> */}
<Scene key='SizeCheck' component={SizeCheckContainer} title={I18n.t('App.SizeCheck_Title')} hideNavBar={true} />
<Scene key='FittingCheck' component={FittingCheckContainer} title={I18n.t('App.FittingCheck_Title')} hideNavBar={true} />
</Scene>
</Router>
</Provider>
);
}
}

运行时,打开远程调试,可以在Chrome开发工具中看到日志信息

有了日志功能后,可以比较简单的查看到action的type及其他参数,也可以看到每一个action发生前与发生后state(reducers)的变化

react native redux saga增加日志功能的更多相关文章

  1. react native redux 草稿

    Provider > Provider > 使组件层级中的 方法都能够获得 Redux store.正常情况下,你的根组件应该嵌套在 Provider 中才能使用 方法. 如果你真的不想把 ...

  2. React Native 0.50版本新功能简介

    React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...

  3. 14. react 基础 redux 的编写 TodoList 功能

    1. 安装 redux 监听工具 ( 需要翻墙 ) 打开 谷歌商店 搜索 redux devtool 安装第一个即可 2. 安装 redux yarn add redux 3. 创建 一个 store ...

  4. react native redux

    redux可以解决, 程序中所有组件的状态统一管理, 从而使我们可以更加动态的,灵活的控制程序 React:数据管理使用props.stateRedux的主要思想:提供一个数据存储中心,可以供外部访问 ...

  5. [React] 14 - Redux: Redux Saga

    Ref: Build Real App with React #14: Redux Saga Ref: 聊一聊 redux 异步流之 redux-saga  [入门] Ref: 从redux-thun ...

  6. 如何为Windows服务增加Log4net和EventLog的日志功能。

    一.简介 最近在做一个项目的时候,需要该项目自动启动.自动运行,不需要认为干预.不用说,大家都知道用什么技术,那就是 Windows服务.在以前的Net Framework 平台下,Windows 服 ...

  7. 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)

    ),请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayoutAndroid组件封 ...

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

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

  9. 【React Native 实战】旋转图片验证码

    1.前言蘑菇街用打乱方向的图片作为验证码,既起到了验证码的作用又宣传了图片,今天我们就用React Native来实现这样的功能. 2.属性 Image标签属性resizeMode enum('cov ...

随机推荐

  1. springboot整合thumbnailator实现图片压缩

    springboot整合thumbnailator实现图片压缩 前言 最近由于首页产品列表图片显示太慢,经过研究发现是用户上传的图片太大. 针对这个问题,想到的解决方案是: 1. 产品上传时,限定图片 ...

  2. jsp 内置对象二

    1.什么是session ? (1)session 表示客户端与服务器的一次回话. 2)Web中的session指的是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网 ...

  3. 「6月雅礼集训 2017 Day8」gcd

    [题目大意] 定义times(a, b)表示用辗转相除计算a和b的最大公约数所需步骤. 那么有: 1. times(a, b) = times(b, a) 2. times(a, 0) = 0 3. ...

  4. 【Luogu】P3933 Chtholly Nota Seniorious

    [题意]将n*m矩阵分成两个区域,要求满足一定条件,求两区域内部极差较大值最小.n,m<=2000 [算法]二分 [题解]极差的数值满足单调性,所以考虑二分极差. 对于给定的极差,将所有数值排序 ...

  5. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  6. CSS浮动为什么不会遮盖同级元素

    1.问题描述 在W3CSchool学习web前端时,看完CSS定位-浮动这一节后,感觉没有什么问题.但是在CSS高级-分类这一节的中进行实践时,遇到了如下问题.测试地址:浮动的简单应用. 完整的htm ...

  7. linux进程管理-定时定期执行任务

     0.计划任务的命令: at 安排作业在某一时刻执行 batch 安排作业在系统负载不重时执行 crontab 安排周期性运行的作业 1.at命令用法: 安排命令或者多个命令在指定的时间运行一次 语法 ...

  8. python—RE正则表达式

    re正则表达式 正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 C 编写的 ...

  9. •搭建LAMP环境及快速部署双网站并实现基于域名的虚拟主机

    本节所讲内容: 实战:搭建LAMP环境及快速部署双网站并实现基于域名的虚拟主机 LAMP架构:??? Linux+Apache+Mysql+PHP Linux+Apache+Mysql/MariaDB ...

  10. 细数雷军系成员,27家公司3家IPO

    自 2004 年至今,作为天使投资人和顺为基金创始合伙人,雷军共投了移动互联网.电子商务.互联网社区等领域内的 27 家创业公司,其中欢聚时代.猎豹移动.迅雷三家公司成功上市.小米科技虽然还未 IPO ...