React-Native 之 redux 与 react-red

2017-04-24 本文已影响3671人珍此良辰

前言

本文 有配套视频，可以酌情观看。
文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我讨论。
文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关，如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。
转载麻烦注明出处，谢谢。

本篇资源：链接：https://pan.baidu.com/s/1jIY5aqq 密码：C418

redux简介

简单来说，redux 就是帮我们统一管理了 react 组件的 state 状态。
为什么要使用 redux 统一管理 state 呢？没有 redux 我们依旧可以开发 APP，但是当 APP 的复杂度到达一定程度的时候，摆在我们面前的就是 难以维护 的代码（其中包含组件大量的异步回调，数据处理等等），但是使用 redux 也会增加我们整个项目的复杂度，这就需要我们在两者之间进行权衡了，对于这一部分，redux 开发者给我们下面几个参考点：
- 以下几种情况不需要使用 redux：
  - 整体 UI 很简单，没有太多交互。
  - 不需要与服务器进行大量交互，也没有使用 WebSocket。
  - 视图层只从单一来源获取数据。
- 以下几种情况可考虑使用 redux：
  - 用户的交互复杂。
  - 根据层级用户划分功能。
  - 多个用户之间协作。
  - 与服务器大量交互，或使用了 WebSocket。
  - 视图层需要从多个来源获取数据。
  - 遇到 React 无法解决的问题。
- 总结以上内容：redux 适用于多交互，多数据源，复杂程度高的工程中。
也就是说，当我们的组件出现 某个状态需要共享，需要改变另一个组件状态 等传值比较不容易的情况。就可以考虑 redux ，当然还有其他 redux 的替代产品供我们使用。

译注：

WebSocket：被称为下一代客户端与服务端的异步通信方法。取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。主要的优点是服务器和客户端可以彼此相互推送信息，允许跨域通信。

redux 必要知识

使用 redux 之前，基本的东西还是要都懂的，数据流向介绍：

redux工作流程.png

Action：行为。它的作用就是将我们更新组件的 状态(state) 的每个动作抽象为一个行为，它有一个必须的参数 type，定义了 Action(行为) 的名称，其他参数可自定义。写法：
```
    {
        type: 'TEST_ACTION',
        key1: 'value',
            ...
        keyN: value
    }
```

因为 Action 是个对象，所以，我们需要创建这个对象，那创建这个对象的方法叫做 ActionCreator，写法：

    function testAction(key1: ?string, ..., keyN: ?string) {
        return {
            type: "TEST_ACTION",
            key1: key1,
            ...
            keyN: keyN
        }
    }

Reducer：reducer 的作用就是根据传入的 Action行为和旧的 state对象，返回一个新的 state ，然后组件会根据 state 刷新。当我们确定了组件的 state 对象结构和 action 行为的时候就可以编写 reducer 中的内容。写法：

    function testReducer(state, action) {
        let key1 = action.key1;
        switch(action.type) {
            case TEST_ACTION:
                return {
                ...state,
                key1: key1 + '变化'
            };
            
            default:
                return state;
        }
    };
    
    export default testReducer;

当然我们的工程中可能会有多个 reducer 的情况，通过 combineReducers 可以将多个 reducer 合成统一管理。

    import { combineReducers } from 'redux';
    import testReducer1 from './testReducer1';
    import testReducer2 from './testReducer2';
    
    export default = combineReducers({
        testReducer1,
        testReducer2
    });

reducer 是一个纯函数（同样的输入，必须有同样的输出，需要遵循 3 个约束）：
- 不可修改传入的参数。
- 一定要干净，没有API请求，没有变量修改，单纯执行计算，没有特殊情况。
- 调用非纯函数(Date.now()、Math.random()等)，每次都会得到不同结果导致数据错误等安全问题。
- 当传入的 state 与旧state 相比没有区别，返回的新state也应该一摸一样。
Store：当 reducer 返回了新的 state 后，这个 state 怎么传到组件和存储就成了问题，redux 就是把这个状态统一放到 store 中进行管理。
```
    import { createStore } from 'redux';
    const store = createStore(reducers);
```

上面的代码根据 reducers 创建了一个 store方法集（它并不是一个对象），然后再 store 中提供一些方法供我们使用：

    // 获取当前 state
    store.getState()
    
    // 发送action,根据我们前面 注册的reducers 处理state
    store.dispath(action)
    
    // 替换当前 state 中的 reducer
    store.replaceReducer(nextReducer) 
    
    // 添加监听
    store.subscribe(listener)

另外 redux 有 5个全局方法：
- createStore：创建一个readux store 来存储应用中所有的state，应用中只能存在一个 store
```
    createStore(reducer, [initialState],enhancer);
```
- combineReducers：把多个reducer函数作为value的object，合并成一个reducers函数，然后就可以通过reducers调用各个子reducer,state 对象的结构由传入的多个 reducer 的 key 决定。
```
    combineReducers(...reducers)
```
- ...middlewares：每个 middleware 接受 store 的 dispatch 和 getState 函数作为命名参数，并返回一个函数。
  - 该函数会被传入被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接受 action 的新函数，这个函数可以直接调用 next(action)，或者在其他需要的时刻调用，也可不调用。
  - 调用链的最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数，并结束调用链。所以 middleware 的函数为 ({ getState, dispatch }) => next => action。
  - 返回值：一个应用了 middleware 后的 store enhancer。这个store enhancer 就是一个函数，并且需要应用到 createStore。它会返回一个应用了 middleware 的新 createStore。
- bindActionCreators：把 actionCreators 转曾拥有同名 keys 的对象，让 dispatch 把每个 actionCreator 包装起来，这样就可以直接调用它们。唯一使用 bindActionCreators 的场景是需要把 actionCreator 往下传到一个组件上，却不想让这个组件察觉到 redux 的存在，而且不希望把 redux store 或者 dispatch 传给它。
```
    // actionCreators：一个 actionCreators 或 键值是 actionCreators 的对象
    // dispatch：一个 dispatch 函数， 由 store 提供
    bindActionCreators(actionCreators, dispatch)
```
  - 返回值：一个与原对象类似的对象，只不过这个对象中的每个函数值都直接 dispatch action。如果传入的是个函数，返回的也是函数。
- compose(...fuctions)：当需要多个 store 增强器依次执行的时候使用它。compose 在应用常见的两个用法：
```
    // 1
    let buildStore = compose(
        applymiddleware(thunk)
    )(createStore)
    
    // 2
    let initStore = compose(
        applymiddleware(thunk)
    )
```
  - 参数1(arguments)：合成多个函数。每个函数接受一个函数作为参数，然后返回一个函数。
  - 参数2(Function)：从右往左把接受到的函数合成后的终极函数。
可能刚接触，还不能很好理解，这边我们换个方式来理解，如下图：

举个栗子.png

更多关于 redux 的内容（如 redux数据异步处理等）可前往官方文档阅读查看，这边不讲这么多，只要了解上面的这些就可以了。

react-redux 需要知道的那些事

终于进入正题了，为了在 react-native 中使用 redux，开发者提供了 react-redux，基础工作原理不变，只不过多了些方法和参数，所以这边就需要继续了解一下，以下内容整理自官方文档：
<Provider store>：使组件层级中的 connect() 方法能够得到 redux store。正常情况下，我们的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。
- 属性(store)：工程中唯一的 redux store。
- 属性(children)：组件层级的根组件。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])：链接 react组件和 redux store。
- 参数(mapStateToProps(state, [ownProps]): stateProps)：定义了这个参数，组件会监听 redux store 的变化，在任何情况下，只要 redux store 发送变化， mapStateToProps 函数就会被调用。也就是说：mapStateToProps负责返回需要传递给子组件的 state。
  - 这个函数必须返回一个纯对象，这个对象会与组件的props合并，如果省略这个参数，组件将监听不到 redux store 。
  - 如果指定改回调函数中的第二个参数 ownProps，这个参数的值为传递到组件的props，而且只要组件接到新的 props，mapStateToProps 也会被调用。
- 参数(mapDispatchToProps(dispatch, [ownProps]): dispatchProps)：负责返回一个 dispatchProps，dispatchProps 是actionCreator的key和dispatch(action)的组合。
  - 如果传递一个对象，那么每个定义在该对象的函数都将被当做 redux action creator，而且这个对象会与 redux store 绑定在一起，其中所定义的方法名将作为属性名，合并到组件的 props 中。
  - 如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由我们自己决定如何返回一个对象，这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起（提示：你也许会用到 Redux 的辅助函数bindActionCreators()）。
  - 如果你省略这个 mapDispatchToProps 参数，默认情况下，dispatch 会注入到你的组件 props 中。
  - 如果指定了该回调函数中第二个参数 ownProps，该参数的值为传递到组件的 props，而且只要组件接收到新props，mapDispatchToProps 也会被调用。
- 参数(mergeProps(stateProps, dispatchProps, ownProps): props (Function))：如果指定了这个参数，mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({}, ownProps, stateProps,dispatchProps) 的结果。
- 参数(options (Object)) 如果指定这个参数，可以定制 connector 的行为。
  - [pure = true] (Boolean): 如果为 true，connector 将执行 shouldComponentUpdate 并且浅对比mergeProps 的结果，避免不必要的更新，前提是当前组件是一个“纯”组件，它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true。
  - [withRef = false] (Boolean): 如果为 true，connector 会保存一个对被包装组件实例的引用，该引用通过 getWrappedInstance() 方法获得。默认值为 false。
- 返回值：根据配置信息，返回一个注入了 state 和 action creator 的 React 组件。
  - 静态属性：WrappedComponent (Component): 传递到 connect() 函数的原始组件类。
  - 静态方法：组件原来的静态方法都被提升到被包装的 React 组件。
  - 实例方法：getWrappedInstance(): ReactComponent；仅当 connect() 函数的第四个参数 options 设置了 { withRef: true } 才返回被包装的组件实例。

注：

函数将被调用两次。第一次是设置参数，第二次是组件与 Redux store 连接 connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent)。

connect 函数不会修改传入的 React 组件，返回的是一个新的已与 Redux store 连接的组件，而且你应该使用这个新组件。

mapStateToProps 函数接收整个 Redux store 的 state 作为 props，然后返回一个传入到组件 props 的对象。该函数被称之为 selector。参考使用 reselect 高效地组合多个 selector ，并对收集到的数据进行处理。

bindActionCreators 的作用就是将 Actions 和 dispatch 组合起来生成 mapDispatchToProps 需要生成的内容。

是不是又懵圈了？那其实没必要想得太复杂，只不过是组件这边进行了2次包装，其他并没有太大的改变，这边给各位客官又画了张图帮忙理解：

Snip20170419_1.png

更多 react-redux 相关信息，请前往 Redux官方文档查阅。

使用前准备

使用 redux 之前，我们还是需要配置一下是吧，很简单，我们只需要执行以下步骤：
- 使用 终端 打开需要使用 redux 的工程主目录：
```
    // 比如我们的
    cd Desktop/Test
```
- 导入 redux库：
```
    npm install --save redux
```
- 我喜欢直接介绍实用的，所以这边我们要直接介绍 react-redux ，不磨磨唧唧一大堆有的没的，所以我们还需要：
```
    npm install --save react-redux
```
- 这里先不讲 中间件，尽量不然这些东西干扰我们。
- 好了，这样我们就可以开始在 react-native 中使用 redux 了。

react-redux 使用

既然已经了解了redux和react-redux相关的东西，那这边就通过一个小Demo来实际演练一下，UI结构如下：

UI结构.png

首先，根据 redux官方文档的示例 我们可以看出官方建议我们将组件分成 containers(容器组件)、components(模块视图组件)、redux 三大块。所以我们这边文件的层级如下图所示：

目录结构.png

接着，我们再来完成视图部分，然后根据视图部分确定哪些需要 redux 支持，再来生成相应的 action 与 reducer 文件。

首先，是 Main 文件，作为我们的容器组件放到 containers 文件夹内，Main 中的内容：

    import React, { Component } from 'react';
    import {
        StyleSheet,
        Text,
        View,
        TouchableOpacity,
    } from 'react-native';
    
    export default class Main extends Component {
        render() {
            return (
                <View style={styles.container}>
                    {/* 需要改变的组件 */}
    
                    {/* 按钮 */}
                    <TouchableOpacity>
                        <Text>改变文字按钮</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
    });

那里面我们需要将 Text 作为视图组件独立出来，所以将视图组件 TestText 放到 components 文件夹中，TestText 中的内容：

    export default class TestText extends Component {
        render() {
            return (
                <Text>Welcome to React Native</Text>
            );
        }
    }

视图部分我们搭建完成，那么我们接着就是确定需要哪些 action(行为)，那前面提到了，我们是要点击按钮的时候让文字发生改变，也就是说我们当前需要一个改变文字的行为，那我们就将这个行为命名为 CHANGE_TEXT,那么我们需要初始化这个 action 这个对象，也就是前面我们提到的 action creator：
```
    export const CHANGE_TEXT = 'CHANGE_TEXT';

    // 初始化 CHANGE_TEXT 对象
    export const changeText = (text) => {
        return {
            type: CHANGE_TEXT,
            text
        }
    };
```

action 文件配置完毕后，我们就可以根据需求来编写 reducer 文件了，reducer 文件就是起到更新 state 的作用嘛，所以我们将改变文字的逻辑放到这里，当reducer 匹配到当前的点击行为为 CHANGE_TEXT 时，就执行相应的操作，返回一个新的 state 给我们使用，如果匹配不到，那么就默认返回一个不变的新 state：

    import { CHANGE_TEXT, changeText } from '../action/action';

    const mainReducer = (state = changeText('welcome to React Native'), action) => {
    
        const newState = state;
        const text = action.text;
    
        // 判断 action 类型
        switch (action.type) {
            case CHANGE_TEXT:
                return {
                    ...newState,
                    text: '改变了' + text
                };
    
            default:
                return {
                    ...newState,
                    text:state.text
                }
        }
    };
    
    export default mainReducer;

配置完 action 和 reducer 两个文件后，紧接着我们就可以根据 reducer 来初始化 store 了：

    import Reducer from '../reducer/reducer';
    import { createStore } from 'redux';
    
    export default () => {
    
        // 根据 reducer 初始化 store
        const store = createStore(Reducer);
    
        return store;
    }

redux 的东西已经都配置完成了，接着就剩下使用了，所以接下来要解决的问题就是怎么发送行为，怎么接收 state(状态)，上面提到了，store 其实是个方法集，我们的 发送行为和接收状态 方法都在 store 中，所以只要拿到 store，所以只要拿到 store 就能进行这两个操作。

那怎么拿到 store 呢？在官方文档中，清楚地告诉我们，Provider 的任务就是将 store 传给 connect，而 connect 的作用是将我们的组件进行第二次包装，将操作数据的函数和数据的状态包装到 props 中，所以，首先，我们需要对我们的 Main 文件进行第一次包装，我们再新建一个 index 文件来对 Main 文件进行包装：

    import React, { Component } from 'react';

    // 引用外部文件
    import { Provider } from 'react-redux';
    import Main from './Main';
    import configureStore from '../redux/store/store';
    
    // 调用 store 文件中的 mainReducer常量中保存的方法
    const store = configureStore();
    
    export default class Root extends Component {
        render() {
            return(
                // 第一层包装,为了让 main 能够拿到 store
                <Provider store={store}>
                    <Main />
                </Provider>
            )
        }
    }

包装完成后，我们的 Main 文件就可以获得 store 了，那接着就是进行第二次包装了，通过 connect 生成新组件：

    import React, { Component } from 'react';
    import {
        StyleSheet,
        Text,
        View,
        TouchableOpacity,
    } from 'react-native';
    
    
    import { connect } from 'react-redux';
    import { changeText } from '../redux/action/action';
    import TestText from '../components/TestText';
    
    
    class Main extends Component {
        render() {
    
            // 通过 props 拿到保存的 onChangeText
            const { onChangeText } = this.props;
    
            return (
                <View style={styles.container}>
                    {/* 需要改变的组件 */}
                    <TestText {...this.props} />
    
                    {/* 按钮 */}
                    <TouchableOpacity
                        onPress={onChangeText}
                    >
                        <Text>改变文字按钮</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
    });
    
    // 获取 state 变化
    const mapStateToProps = (state) => {
        return {
            // 获取 state 变化
        }
    };
    
    // 发送行为
    const mapDispatchToProps = (dispatch) => {
        return {
            // 发送行为
        }
    };
    
    // 进行第二层包装,生成的新组件拥有 接收和发送 数据的能力
    export default connect(mapStateToProps, mapDispatchToProps)(Main);

到这里，我们的新组件就能够收发数据了，那怎么接收和发送呢，别急，我们接着就来完成 mapStateToProps(更新回调) 和 mapDispatchToProps(发送行为) 两个方法。首先，我们需要通过 mapDispatchToProps 来发送行为，然后通过 mapStateToProps 来监听 state 的变化，这边我们需要发送的行为 type 是 CHANGE_TEXT,当发送行为之后，reducer 就会去匹配行为的类型，进行相应操作：
```
    // 发送行为
    const mapDispatchToProps = (dispatch) => {
        return {
            onChangeText: () => dispatch(changeText('外部传值')),
        }
    };
```
当 reducer 接收到我们触发的行为并进行一系列处理后，最终会返回一个新的 state，那么就会自动调用 mapStateToProps 来告诉系统，state 被操作了，那么我们就可以通过 mapStateToProps 来获取 state 状态：
```
    // 获取 state 变化
    const mapStateToProps = (state) => {
        return {
            value: state.text,
        }
    };
```
那么接下来我们怎么改变文字呢？前面提到，connect 作用就是生成一个新的组件，新的组件的 props 中包含了数据获取和操作数据的函数，所以我们需要让子组件拿到容器组件中的 props，然后在子组件中通过 props 就可以拿到上面定义的 value 和 onChangeText：
```
    export default class TestText extends Component {
        render() {
    
            // 获取 props 中的 value
            const { value } = this.props;
    
            return (
                // 根据 value 改变内部文字
                <Text>{value}</Text>
            );
        }
    }
```
到这里，我们就能成功改变文字了。

效果演示.gif

小结论：

其实从上面的 demo 就可以看出，使用了 redux 的项目变得比原本要复杂得多，原本几句代码就能搞定的事情现在要来个 山路十八弯 ，这是因为 redux 是为了解决复杂工程而孕育的，所以不要为了使用 redux 而去使用它，使用之前需要权衡一下利弊，其中的好与坏只能自己慢慢体会。

redux 对于刚入门的朋友来说确实比较绕，帮助理解的办法就是多练，如果只看的话可能会越看越乱，所以还是建议多练，熟练之后就感觉没什么了。

中间件

我个人认为中间件只需要注意 “顺序” 就可以了。使用方法什么的在中间件的说明文档中都讲得很清楚。
关于中间件的使用，这边就不多讲了，因为可用的中间件很多，不可能一个一个讲，等后面文章涉及哪些中间件再讲。