设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

楼主: 东方耀

[Redux架构] 72、手把手教React Native实战之Redux架构_使用步骤_源码

  [复制链接]

0

主题

164

帖子

607

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
607
发表于 2016-9-1 16:46:01 | 显示全部楼层
to be continued
回复 支持 反对

使用道具 举报

1

主题

285

帖子

647

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
647
发表于 2016-9-1 19:27:05 | 显示全部楼层
把手教React Native实战之Redux架构_使用步骤_源码
回复 支持 反对

使用道具 举报

1

主题

189

帖子

485

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
485
发表于 2016-9-1 21:11:04 | 显示全部楼层
手把手教React Native实战之Redux架构_使用步骤_源码
回复 支持 反对

使用道具 举报

0

主题

110

帖子

244

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
244
发表于 2016-9-1 21:57:52 | 显示全部楼层
好好学习,天天向上
回复 支持 反对

使用道具 举报

8

主题

50

帖子

208

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
208
发表于 2016-9-2 08:07:52 | 显示全部楼层
dgdsfgdgdfgsdfgf
回复 支持 反对

使用道具 举报

1

主题

279

帖子

827

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
827
发表于 2016-9-2 08:54:24 | 显示全部楼层
学习,学习,学习
回复 支持 反对

使用道具 举报

0

主题

139

帖子

350

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
350
发表于 2016-9-2 09:04:27 | 显示全部楼层
Redux中文文档:https://github.com/camsong/redux-in-chinese

部署Redux架构的步骤:

npm install --save redux

npm install --save react-redux

npm install --save-dev redux-devtools

要点

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action,一个描述发生什么的对象。
为了描述 action 如何改变 state 树,你需要编写 reducers。

就是这样!


使用Redux架构的步骤:

1.先建action  描述用户意图 业务相关

2.再创建reducer(跟store相关联的) 纯函数 跟state在一起

3.使用connect将数据模型与界面view连接起来

import {connect} from 'react-redux';

//connect是react与redux的连接器 高阶函数

4.配置connect的map映射mapStateToProps

5.开始trigger事件action:this.props.dispatch(action)

6.根据reducer创建store 配置configureStore.js文件 把所有的reducer导入进来并combineReducers成rootReducer 用createStore创建store

7.在最外层引入react-redux的Provider

reducer:本质上是MVI的Model函数,负责描述数据如何变化

这些概念都是一样的:state model store 都代表数据的存储

dispatch:这个变量是由connect的高阶组件注入给低阶组件的

Provider:给下面的组件push各种更新事件 控制Redux的各种生命周期 更好的调试与控制 尤其是很复杂的Redux系统


什么时候用Redux?【状态同步】

1.有两个组件依赖同一个状态,并且这个状态需要持久化,同时要在这两个组件中保证同步  我有一个状态需要很多组件依赖的时候

用户user.js需要用Redux,很多页面需要用户的相关信息

2.我有一个状态需要很多组件改变的时候 比如:react-native-redux-navigator
回复 支持 反对

使用道具 举报

0

主题

274

帖子

644

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
644
发表于 2016-9-2 09:12:33 | 显示全部楼层
源码下载
回复

使用道具 举报

0

主题

127

帖子

302

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
302
发表于 2016-9-2 09:57:52 | 显示全部楼层
1111111111111
回复 支持 反对

使用道具 举报

0

主题

156

帖子

432

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
432
QQ
发表于 2016-9-2 10:30:45 | 显示全部楼层
终于等到你
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-10-18 02:00 , Processed in 0.214019 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表