在 React Native 中使用 Redux 架构

前言

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 的t ype 来返回一个新的 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 有以下职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

来看下例子：

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 (
        <ReactJChat />
      );
    }
});

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 (
            <Provider store = { store }>
                <BaseApp />
            </Provider>
        );
    }
 }
```
这里首先通过 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 <Component 
                    //将 state，params，actions，navigator 通过属性传递到 Component
                    {...route.params}
                    state = { state }
                    actions = { action }
                    navigator = { navigator }
                />
    }

    render() {
        return (
            <Navigator
                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 ?
            <View style = { styles.container }>
            { conversationReducer.fetching && <View style = { {alignItems: 'center', justifyContent: 'center'} }>
                    <Text style = { {fontSize: 24, }}>
                        正在加载...
                    </Text>
                </View> } 
            </View> :
            <ListView style = { styles.listView }
                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(
            <View key = { 0 } style = { pageStyle } collapsable = { true }>
                <Conv
                    //将 state，action 传到 Conv Component
                    state = { this.props.state }
                    actions = { this.props.actions }
                    navigator = { this.props.navigator }
                />
            </View>
        );
```
另外，还有关于 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](https://facebook.github.io/immutable-js/)。

- **Image**
官方的 Image 组件功能还是蛮强大的，要显示网络图片的话提供一个 uri 就可以自动显示图片；如果要显示 drawable 文件夹下的图片，直接在 uri 中填写图片的名字就行了，如：
```
<Image 
    style = { styles.titlebarImage }
    source = { {uri: 'msg_titlebar_right_btn'}}
/>
```
如果要显示在 sd 卡中的图片的话，可以在 uri 中加 file:/// 路径就可以显示，如：

```
<Image 
    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，可以[参考这个](https://github.com/magicismight/react-native-root-modal)。但是 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});
        });
    }

          <Animated.Modal
              style = { [styles.dropDownMenu, {transform: [{translateY: this.state.y}, {scale: this.state.scaleAnimation}]}] }
              visible = { this.state.showDropDownMenu }>
          </Animated.Modal>
```

###后记
React Native JChat 目前尚未完善，之后会慢慢实现。如果你想对 [React Native JChat] (https://github.com/jpush/jmessage-react-plugin)提一些改进，欢迎 fork，并提交 PR。有什么问题可与我联系：caiyaoguan@gmail.com