React-Navigation与Redux整合详解
本文转自:文章地址:http://blog.csdn.net/u013718120/article/details/72357698
继react-navigation发布已经过去半年的时间,想必React Native的玩家早已玩转于手掌了。如果你还不了解,就out啦~还在等什么?
React Native未来导航者:react-navigation 使用详解
Redux框架给开发者带来的优势是显而易见的。它好比Android中的MVP架构一样,使得复杂的业务逻辑和视图状态变得简单、清晰。如何将react-navigation和Redux结合到一起呢?本篇博客就来唠唠。
在搞定Redux与react-navigation整合之前,我们有必要先了解下在没有使用react-navigation导航下的Redux项目架构,先来看一个简单的Redux项目目录:
一般情况下,Redux项目中都会包含如下几个目录:
(1)Action
(2)Reducer
(3)Store
熟悉Redux的玩家肯定对这三个模块肯定都不陌生。Action中负责分发用户行为;Reducer接收Action,并根据行为类型进行相应的逻辑处理,并返回最新状态;Store中负责Action和Reducer的交互,并记录Reducer处理的最新状态。并且还可以应用中间件等;此时可利用react-redux将状态与视图绑定。这样,Action -> Controller -> View就完美的形成了闭环流程。下面我们分别看下三者之间是如何衔接的。
1、Action
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
export let main = (url, params, isLoading, isLoadMore, isRefreshing) => { return dispatch => { // 1.发出拉取数据的信号 dispatch(loadMainContent(isLoading, isLoadMore, isRefreshing)); // 2.请求网络 return HttpUtil.fetchGet(url, params, (responseObj) => { dispatch(receiveMainContent(responseObj.result.bookList)); console.info( "success" ); }, (error) => { dispatch(receiveMainContent([])); console.info( "error" + error); } ) } } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
let loadMainContent = (isLoading, isLoadMore, isRefreshing) => { return { type: types.LOAD_MAIN_LIST, isLoading: isLoading, isLoadMore: isLoadMore, isRefreshing: isRefreshing } } let receiveMainContent = (mainList) => { return { type: types.GET_MAIN_LIST, mainList: mainList } } |
如上代码所示,在main Action中,我们定义了不同的Action行为,并通过dispatch进行分发。
2、Reducer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const initState = { mainList: [], isLoading: true , isLoadMore: false , isRefreshing: false } let mainReducer = (state = initState, action) => { switch (action.type) { case types.LOAD_MAIN_LIST: return Object.assign({}, state, { isLoading: action.isLoading, isLoadMore: action.isLoadMore, isRefreshing: action.isRefreshing }); case types.GET_MAIN_LIST: return Object.assign({}, state, { isLoading: false , isRefreshing: false , mainList: state.isLoadMore ? state.mainList.concat(action.mainList) : action.mainList }) default : return state; } } |
上面代码定义了对应的Reducer,用来接收Action的行为,并进行处理,最终返回最新状态State。
3、整合Reducer
1
2
3
4
|
export default rootReducer = combineReducers({ Main, }) |
4、Store
1
2
3
4
|
let store = createStore(rootReducer, {}, compose( applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f )) |
Store相对简单,因为Redux本身没有异步概念,不能直接使用setTimeOut等,但是网络处理需要异步进行,并且结果是异步返回,所以为了处理此种情况,可以使用中间件react-thunk帮助我们完成。
5、Connect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import React, { Component } from 'react' ; import { Provider } from 'react-redux' ; import App from './components/app' ; import store from './store/store' ; export default class Root extends Component { render() { return ( <Provider store={store}> <App /> </Provider> ) } } |
使用react-redux将store传递到Provider,从而将Redux和视图层绑定在一起,完成Action -> Reducer -> Store -> View的整体连接。
上面代码中App即视图的入口,react-navigation其实就充当了程序的入口,负责视图界面之间的跳转交互。
1
2
3
4
5
|
const AppNavigator = StackNavigator( { Splash: { screen: SplashScene }, } ) |
在react-navigation中使用navigate来实现界面间跳转行为。此时我们可以理解为Redux中的dispatch,即一个用户行为。
1、dispatch的触发需要Reducer的接收,所以我们需要定义react-navigation的Reducer:
1
2
3
4
5
6
7
8
|
import Routers from './Router' ; const navReducer = (state,action) => { const newState = Routers.router.getStateForAction(action, state); return newState || state; } export default navReducer; |
Router中就是我们定义的react-navigation的StackNavigator。navReducer即为接收跳转状态的Reducer,代码中我们通过获取StackNavigator的Action来返回最新的处理状态。
2、在rootReducer中注册该reducer:
1
2
3
|
export default rootReducer = combineReducers({ Nav }) |
3、Store中仍然是注册rootRecuder,使用中间件等等。
4、App首页中绑定(app.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
@connect(state => ({ nav: state.nav })) class AppWithNavigationState extends Component { render() { return ( <Router navigation={addNavigationHelpers({ dispatch: this .props.dispatch, state: this .props.nav })} /> ); } } export default class App extends Component { render() { return ( <Provider store={ store }> <AppWithNavigationState/> </Provider> ) } } |
以上代码定义在程序入口中,从代码可以看到,首先使用@connect绑定nav的state,即NavReducer中返回的state。Router就是我们的StackNavigator,对其添加addNavigationHelpers,并将dispatch和state传入。dispatch和nav就是Redux中分发的行为和状态,这样去触发react-navigation的改变。最后使用Provider包含并将store注入到Provider。
总结下流程:
(1)定义navReducer,返回导航状态。(跳转State)
(2)注册reducer。 (将navReducer添加到rootReducer)
(3)创建store。(store中注入rootReducer)
(4)程序入口中将store注入Provider。(Provider将store注入StackNavigator)
(5)@connect获取最新导航状态。(将StackNavigator于=与Redux绑定)
(6)设置StackNavigator的addNavigationHelpers,并将状态和行为传入。(StackNavigator接收到Reducer返回的最新状态,执行相应改变(跳转等))
以上步骤执行完,此时,程序会在@connect抛出错误,因为我们使用了@描述符,所以需要引入如下第三方库:
1
|
"babel-plugin-transform-decorators-legacy" : "^1.3.4" |
(1)npm i babel-plugin-transform-decorators-legacy --save -dev
(2)项目根目录找到 文件,打开添加如下:
1
2
3
4
|
{ "presets" : [ "react-native" ], "plugins" :[ "transform-decorators-legacy" ] // 添加引用插件 } |
ok,到此通过以上步骤,我们就将Redux和react-navigation整合在一起啦~
老规矩,源码奉上,点击下载
刚创建的React Native交流11群:112490774,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
尊重原创,转载请注明:From Sky丶清(http://www.lcode.org) 侵权必究!
引用原文:http://www.lcode.org/react-navigation-redux/
写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!
如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!
React-Navigation与Redux整合详解的更多相关文章
- idea spring+springmvc+mybatis环境配置整合详解
idea spring+springmvc+mybatis环境配置整合详解 1.配置整合前所需准备的环境: 1.1:jdk1.8 1.2:idea2017.1.5 1.3:Maven 3.5.2 2. ...
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- React源码 commit阶段详解
转: React源码 commit阶段详解 点击进入React源码调试仓库. 当render阶段完成后,意味着在内存中构建的workInProgress树所有更新工作已经完成,这包括树中fiber节点 ...
- 【redux】详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- 1、Shiro 安全框架与Spring 整合详解
Apache Shiro 是一个安全认证框架,和 Spring Security 相比,在于他使用了比较简洁易懂的认证和授权方式.其提供的 native-session(即把用户认证后的授权信息保存在 ...
- Redux 笔记详解
npm install --save redux 多数情况下,你还需要使用 React 绑定库和开发者工具. npm install --save react-redux npm install -- ...
- React生命周期及事件详解
引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...
- Spring、SpringMVC、SpringData + JPA 整合详解
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7759874.html ------------------------------------ ...
随机推荐
- 剑指offer(13)-栈的压入、弹出序列 九度1366
题目来自剑指offer系列 九度 1366:http://ac.jobdu.com/problem.php?pid=1367 题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列 ...
- Java中匿名内部类
匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1:不使用匿名内部类来实现抽象 ...
- Android实例-退出程序
Android实例-退出程序 http://www.cnblogs.com/FKdelphi unit Unit1; interface uses System.SysUtils, System.Ty ...
- 巨蟒python全栈开发-第5天 字典&集合
今日大纲: 1.什么是字典 字典是以key:value的形式来保存数据,用{}表示. 存储的是key:value 2.字典的增删改查(重点) (1) 添加 dic[新key] = 值 setdefau ...
- Storm 架构图
画的丑,勉强看看吧 Nimbus我感觉他就像人的大脑一样! 当客户端给这个人发送了段信息 ,这个人的大脑就接收到这段信息,这个人不简单,是幕后大佬,一般不自己去干活,都是交给下面二当家去执行,当时这个 ...
- MySQL小记
一.MyISAM和InnoDB MyISAM引擎是不支持事务的,所以一般开发Mysql的引擎使用InnoDB. 事务处理上方面: MyISAM类型的表强调的是性能,其执行速度比InnoDB类型更快,但 ...
- 解决 apt-get the following packages has unmet dependencies 问题
安装vpn遇到以下问题: 显示flinux print util和openconnect存在依赖库的冲突 此时尝试安装新的tk.vpnc-scripts.libopenconnect5,尝试apt-g ...
- how to deal with ^M in linux
change windows file to linux file dos2unix configure https://blog.csdn.net/xiongmaojiayou/article/de ...
- caffe使用(1)
caffe使用 caffe是一个卓越的CNN框架 caffe源码是Cpp语言的,基于一些外部的库,包括BLAS(矩阵计算),CUDA(GPU驱动),gflags,glog,boost,protobuf ...
- django博客项目11
.....................