发布时间:2022-08-19 11:30
前言
Redux架构是Flux架构的一个变形,相对于Flux,Redux的复杂性相对较低,而且最为巧妙的是React应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux也只有一个Store,而且只用一个state树来管理组件的状态。随着应用逐渐变得复杂,React将组件看成状态机的优势仿佛变成了自身的绊脚石。因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化。Redux试图让状态的变化变得可预测。Redux的官方文档
如果你厌倦了官网的ToDoList例子,以及React Native上少之又少的关于应用Redux的参考(遗憾的是,仍然是ToDoList案例)。本文将结合作者的亲身经历,帮助那些初次接触Redux,并且需要将Redux架构应用到自己的React Native应用的开发者避开一些坑(反正我是被坑了T_T)。
本文将和开发者一起学习如何将Redux架构应用到React Native应用上,并且使用jmessage-sdk初步构建一个聊天应用。我们先来看看最终效果吧:
开始
在开始使用Redux架构之前,我们先来捋一捋action,reducer,以及store这三者的概念,以及他们之间的关系。尽管Redux文档已经写得相对清晰,但对于初学者来说还是不(you)太(dian)友(meng)好(bi)的。我们先来看一张图,大致了解一下它们之间的大致关系:
Action: 把数据从应用传到store的有效载荷
上面是官方给出的解释,但这个解释比较抽象,这么说吧,如果你想要获取一个数据,比如说一张图片,那么就可以定义一个action来完成这个动作。当你执行这个动作的时候,你就可以dispatch一个正在获取的action,这时Reducer就能够根据这个动作来返回一个state,这时候UI能够根据这个状态来做一些事情(比如你在拉图片时肯定不希望UI就这样卡住,可能要显示进度条之类的)。如果数据返回了,就可以再次dispatch一个action,然后Reducer就会返回新的state。下面我们来看看例子:
actions/conversationActions.js
export function addFriend(username) {
return dispatch => {
//先直接dispatch一个类型为adding的action
type: types.ADDING_FRIEND,
JMessageHelper.addFriend(username, (result) => {
dispatch ({
//数据返回后再dispatch一个action,并且也返回了这个数据
type: types.ADD_FRIEND_SUCCESS,
conversation: JSON.parse(result)
});
})
}
}
上面的代码就是一个action创建函数。根据传过来的username,dispatch一个正在添加好友的action,这样Reducer就可以根据这个action返回一个正在添加的state。当数据返回后,再dispatch一个添加成功的action,并且同时返回数据。这里没有dispatch一个添加失败的action,因为在Native中catch住了,严格来说,是要处理请求失败的响应。在官网中的例子是使用了fetch方法,但本例是使用了jmessage-sdk来请求数据,因此是个混合的React Native应用。
Middleware
Middleware其实是action抽象出来的,是对action的进一步封装,用来完成异步API调用等其它事情。本例中没有使用middleware。
Reducer:根据一个action来返回一个new state以更新state
在上面的例子中,我们dispatch的每一个action都会被reducer捕捉到。reducer可以根据action的type来返回一个新的state。在Redux架构中,所有的state都保存在一个单一的对象中。这个对象会随着应用的复杂而变得越来越庞大,state的结构也会变得更加复杂。这个时候就需要拆分reducer,使得每个reducer只负责改变一小部分state。来看看例子:
reducers/conversationReducer.js
export default function conversationList(state, action) {
state = state || {
type: types.INITIAL_CONVERSATION_LIST,
dataSource: [],
fetching: true,
adding: true,
error: false,
}
switch(action.type) {
//正在添加
case types.ADDING_FRIEND:
return {
//使用扩展运算符返回继承之前的状态,如果不更新状态的话这样写就行了,
//在Component中通过this.props.state就可以得到整个state,在Component中可以看到具体使用场景
...state,
//在这里也返回了action,这样可以在Component通过this.props.action直接调用某个action
...action,
adding: true
}
break;
//添加成功
case types.ADD_FRIEND_SUCCESS:
var convList = [...state.convList];
convList.unshift(action.conversation);
dataSource = state.dataSource.cloneWithRows(convList);
console.log('add success convList: ' + convList.toString());
return {
...state,
...action,
convList: convList,
dataSource,
adding: false
}
default:
return {
...state
}
}
}
这是一个reducer函数,根据action.type来返回new state,reducer应该是一个纯函数,这里不允许对数据做额外的处理:
修改传入参数;
执行有副作用的操作,如API请求和路由跳转;
调用非纯函数,如Date.now()或Math.random()等。
reducer就是一个函数,接收旧的state和action,返回新的state:
(previousState, action) => newState
改变了state后,就会触发Component的render方法,重新进行渲染。
Store:把Action和Reducer联系到一起的对象
上面是官方的描述,简而言之,可以理解为store负责绑定action和reducer。一个Redux应用只用一个store。store有以下职责:
来看下例子:
store/configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/index';
//使用Redux提供的createStore方法即可,thunk提供了异步功能有兴趣的可以了解一下,这里不准备深入
const createStoreWithMiddleware = applyMiddleware(
thunk
) (createStore);
//initialState可以设置初始状态,可以用于把服务器端生成的state转变后传给应用
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers');
store.replaceReducer(nextReducer);
});
}
return store;
}
需要注意的是上面的import的reducers/index是对reducer的合并,后面会提到。上面的代码是store的一种写法,可以支持热更新。关于热更新,目前笔者尚未研究(hahaha)。
配置
现在我们已经知道action,reducer以及store的基本概念和作用了,接下来就要把它们连接起来。先来看看我们的目录结构:
|---index.android.js
|---react-native-android
|---actions
|---containers
|---reducers
|---store
先来看看JS入口index.android.js:
index.android.js
'use strict';
import React from 'react-native';
import ReactJChat from './react-native-android/containers/ReactJChat';
var MyAwesomeApp = React.createClass({
render() {
return (
);
}
});
React.AppRegistry.registerComponent('JChatApp', () => MyAwesomeApp);
可以看到这里仅仅是把入口交给了React JChat。这里再次提醒一下,尽量使用ES6的语法import,而不是require,否则会出现莫名其妙的错误(T_T)。接下来是ReactJChat.js。
containers/ReactJChat.js
import React, { Component } from 'react-native';
import { Provider } from 'react-redux';
import BaseApp from './BaseApp';
import configureStore from '../store/configureStore';
const store = configureStore();
export default class ReactJChat extends Component {
render() {
return (
);
}
}
这里首先通过configureStore()得到store,然后通过Provider把store传给真正的入口BaseApp。
containers/BaseApp.js
class BaseApp extends Component {
renderScene(route, navigator) {
_navigator = navigator;
let Component = route.component;
const { state, dispatch } = this.props;
const action = bindActionCreators(actions, dispatch);
return
//将state,params,actions,navigator通过属性传递到Component
{...route.params}
state = { state }
actions = { action }
navigator = { navigator }
/>
}
render() {
return (
initialRoute = { this.initialRoute }
configureScene = { this.configureScene }
renderScene = { this.renderScene }
/>
);
}
}
function mapSateToProps(state) {
return {
state: state
}
}
export default connect(mapSateToProps) (BaseApp)
这里我们主要看一下renderScene()这个函数,const { state, dispatch } = this.props;这句通过this.props可以从store中得到state及dispatch,然后通过bindActionCreators()将我们定义的所有actions通过dispatch关联到state,这样reducer就能够接收dispatch的action,然后返回新的state了。在renderScene()的返回中,将state、action及navigator都作为属性传递到Component了。接下来还定义了一个函数mapStateToProps(),这个方法即是将state作为props可以在所传递的Component中通过this.props得到state,也就是包含所有数据的对象。最后通过react-redux提供的connect方法,将使得BaseApp可以通过this.props得到state 。到此为止,我们已经完成了连接了action、reducer以及store。接下来就可以在Component中发起从Component->Action->Reducer->(Store->)Component的数据流了。
使用
如果你完成了上面的步骤,我们就可以在Component中发起一个action来发动数据流。在本例中,我们从一个会话列表开始讲解数据是如何流动的。先来看一下我们的会话列表片段:
containers/conv_fragment.js
render() {
//这里通过this.props.state得到conversationReducer对象,之所以能得到,是因为在main_activity中将
//state作为属性传过来了
const { conversationReducer } = this.props.state;
//通过conversationReducer得到convList数组
_convList = conversationReducer.convList;
var content = conversationReducer.dataSource.length === 0 ?
{ conversationReducer.fetching &&
正在加载...
}
:
ref = 'listView'
//通过得到conversationReducer的dataSource作为ListView的dataSource
dataSource = { conversationReducer.dataSource }
renderHeader = { this.renderHeader }
renderRow = { this.renderRow }
enableEmptySections = { true }
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={ true }
showsVerticalScrollIndicator={ false }/>;
以上我们通过reduer对象,来获得渲染ListView所需的数据。而reducer又是根据action来返回state(也就是数据)的,这样以来我们只要发起一个action就可以使得数据流通起来。
定义Action
在发起一个action之前,我们先来想象一下,这个action的内容。一个用户登录后,将希望看到自己的会话列表,这个时候我们需要先拉取一下本地的会话列表记录。这样一来,我们的action就诞生了(这里我通过一个例子希望大家理解,把需求转换为具体的action的过程)。来看一下具体的代码:
export function loadConversations() {
return dispatch => {
//这里我在另一个文件中声明了type,也可直接在action中声明
type: types.INITIAL_CONVERSATION_LIST,
JMessageHelper.getConvList((result) => {
dispatch({
//返回数据后,定义一个action类型用来在reducer中进行相关操作
type: types.LOAD_CONVERSATIONS,
convList: JSON.parse(result),
});
}, () => {
dispatch({
type: types.LOAD_ERROR,
convList: []
})
});
}
}
上面是一个获取本地所有会话列表的action声明函数。在开始获取数据之前,直接dispatch了一个action,即INITIAL_CONVERSATION_LIST,在数据返回后,又dispatch了一个成功和一个失败的action。接着我们在reducer中来实现一下捕获这几个action的函数:
定义reducer
reducers/conversationReducer.js
export default function conversationList(state, action) {
//如果state == 上一个state,或者为INITIAL_CONVERSATION_LIST的action,那么返回空的数据以及一些boolean值
state = state || {
type: types.INITIAL_CONVERSATION_LIST,
dataSource: [],
fetching: true,
adding: true,
error: false,
}
switch(action.type) {
case types.LOAD_CONVERSATIONS:
var dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
var convList = action.convList;
dataSource = dataSource.cloneWithRows(convList);
return {
...state,
...action,
convList: convList,
dataSource,
fetching: false,
}
case types.LOAD_ERROR:
var dataSource = action.convList;
return {
...state,
...action,
dataSource,
}
...
上面声明了一个名为conversationList的reducer函数,根据参数(state, action)来返回一个新的state。switch语句中根据action的类型分别进行了处理。当action被dispatch后,与之绑定的reducer函数就会执行。可以看到,上面action的类型为LOAD_CONVERSATIONS时,表明得到了所有本地会话列表的数据。这样reducer要做的就非常明确了:把action中的数据取出来,返回这个数据就行了。再次强调,reducer中不能够出现复杂的操作,以及非纯函数的调用。由于我们的ListView要展示的数据来源于dataSource,这样我们就直接声明了dataSource,然后把数据放进去。至于返回时,要带哪些参数,可以取决于自己的需求。注意,这里的...state以及...action,这是为了在返回新的state后,仍然可以在Component中通过this.props得到state以及action,否则会出现undefined的错误。
发起action
其实人的惯性思维是先发起action,然后再去考虑action里面需要什么内容,然后是reducer应该怎样处理action,并返回state。这里我之所以没有按照这种顺序,是因为,站在编程的角度上来说,我从一个功能需求出发,把需求转化成action,然后再去决定在一个恰当的时候发起这个action。这两种想法并没有褒贬之意,大家见仁见智,希望起到一个抛砖引玉的作用。我们回到会话列表界面:containers/conv_fragment.js
componentDidMount() {
//得到loadConversations这个action
const { loadConversations } = this.props.actions;
const { conversationList } = this.props.state;
//发起action
loadConversations();
}
这里我在组件的生命周期函数componentDidMount中发起了拉取本地所有会话列表的action,因为componentDidMount是在组件render以后马上会执行的函数。通过this.props得到之前在conversationActions中定义的loadConversations函数就可以通过直接调用这个函数来发起action了。这样一来,一旦数据返回,就会执行action->reducer这个流程,由于在reducer中返回的state改变了,就会触发render重新对界面进行渲染,会话列表也就能够在ListView中展示了。
注意事项
如果你的界面使用了Fragment(比如本例),在使用Redux架构时,一定要注意将state或者action作为属性传递到Component中,这样才能在Component中通过this.props得到state及action。
containers/main_activity.js
pages.push(
//将state,action传到Conv Component
state = { this.props.state }
actions = { this.props.actions }
navigator = { this.props.navigator }
/>
);
另外,还有关于actions及reducers的合并,可以参考本例源码中的actions/index.js以及reducers/index.js。在做好这些后,就可以尽情使用Redux了(就跟做填空题一样)。还有一点,在Redux应用中,所有的state都放在一个单一的对象也就是state树中,官网建议,UI相关的state与数据相关的state尽量分开,即UI相关的state不要放在state树里面。
关于一些坑
ListView
接下来我来说一下关于ListView的坑点吧。ListView中的数据来源于dataSource,dataSource的一般写法是这样的:var dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
rowHasChanged的作用是当r1和r2引用不同时,就会刷新ListView。这是一个坑点,只是数据不同是不能刷新ListView的。下面用一个删除会话作为示例:reducers/conversationReducer.js
case types.DELETE_CONVERSATION:
var selected = action.selected;
var convList = [...state.convList];
convList.splice(selected, 1);
var newList = new Array();
newList = convList;
dataSource = state.dataSource.cloneWithRows(newList);
return {
...state,
...action,
convList: newList,
dataSource
}
这是reducer中的一段代码,action的类型为DELETE_CONVERSATION时,从dataSource中删除一个选中的元素,并返回。这里先在convList中删除掉被选中的会话,然后通过var newList = new Array();新建的数据来复制数据。这其实是一种效率不高的做法,可以参考Immutable JS。
Image
官方的Image组件功能还是蛮强大的,要显示网络图片的话提供一个uri就可以自动显示图片;如果要显示drawable文件夹下的图片,直接在uri中填写图片的名字就行了,如:
style = { styles.titlebarImage }
source = { {uri: 'msg_titlebar_right_btn'}}
/>
如果要显示在sd卡中的图片的话,可以在uri中加file:///路径就可以显示,如:
style = { styles.titlebarImage }
source = { {uri: 'file:///data/jchat/images/head_icon.png'}}
/>
但是如果要显示应用包名下的图片(放在sd卡有可能被其他应用修改),那就要费一些周折了。这里本例的做法是把图片在native中转成base64字符串(都是小头像),然后传到JS。Image控件也是支持base64显示的,不过要加上前缀:
//**注意加上前缀**
avatar = "data:image/png;base64," + getBinaryData(avatarFile);
private String getBinaryData(File file) {
try {
FileInputStream fis = new FileInputStream(file);
byte[] byteArray = new byte[fis.available()];
fis.read(byteArray);
fis.close();
byte [] encode = Base64.encode(byteArray, Base64.DEFAULT);
return new String(encode);
} catch (Exception e) {
e.printStackTrace();
return "head_icon";
}
}
Modal
由于React Native中无法自定义dialog(目前只有AlertDialog),所以使用了Modal来替代dialog,可以参考这个。但是Modal实际上是Root View的一个sibling View,也就是说Modal会始终悬浮在最前面。尽管Modal有这个“缺陷”,但是为一个Modal添加各种动画在React Native中是非常容易的。containers/conv_fragment.js
showDropDownMenu() {
if (!this.state.showAddFriendDialog && !this.state.showDelConvDialog) {
if (this.state.showDropDownMenu) {
this.dismissDropDownMenu();
} else {
this.state.y.setValue(-600);
this.state.scaleAnimation.setValue(1);
//spring是一个弹跳物理模型,这里让y的值从-600减到0,就是从上面掉下来的动画
Animated.spring(this.state.y, {
toValue: 0
}).start();
this.setState({ showDropDownMenu: true });
}
}
}
dismissDropDownMenu() {
Animated.timing(this.state.y, {
toValue: -600
}).start(() => {
this.setState({ showDropDownMenu: false});
});
}
style = { [styles.dropDownMenu, {transform: [{translateY: this.state.y}, {scale: this.state.scaleAnimation}]}] }
visible = { this.state.showDropDownMenu }>
后记
React Native JChat目前尚未完善,之后会慢慢实现。如果你想对React Native JChat提一些改进,欢迎fork,并提交MR。有什么问题可与我联系:caiyaoguan@gmail.com
PDF编辑工具 Acrobat Pro DC 2021中文版 (Win/mac)
【SpringBoot学习03】springboot整合第三方技术
抹掉数据时显示连接服务器失败,无法连接iCloud,连接icloud验证失败,icloud连接不到:《苹果抹掉数据验证失败》 苹果icloud怎么登陆不上?-南开游戏网...
目标检测经典论文——Fast R-CNN论文翻译(纯中文版):Fast R-CNN(微软研究院)
手把手教你配置Pytorch环境并使用(Win10系统下基于Anaconda完成的pytorch1.7.1和torchvision0.8.2的Pytorch深度学习环境搭建)