React-Native 之 redux 与 react-redux

前言

---

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

• 本篇资源：链接: https://pan.baidu.com/s/1cGjEua 密码: scea

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 之前，基本的东西还是要都懂的，数据流向介绍：

• 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)：从右往左把接受到的函数合成后的终极函数。

• 可能刚接触，还不能很好理解，这边我们换个方式来理解，如下图：

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

react-redux 需要知道的那些事

---

• 终于进入正题了，为了在 react-native 中使用 redux，开发者提供了 react-redux，基础工作原理不变，只不过多了些方法和参数，所以这边就需要继续了解一下，以下内容整理自官方文档：

• <Provider store>：使组件层级中的 connect() 方法能够得到 redux store。正常情况下，我们的根组件应该嵌套在 中才能使用 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次包装，其他并没有太大的改变，这边给各位客官又画了张图帮忙理解：

• 更多 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结构如下：

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

• 接着，我们再来完成视图部分，然后根据视图部分确定哪些需要 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>
  	        );
  	    }
  	}
  

• 到这里，我们就能成功改变文字了。

小结论：

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

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

中间件

---

• 我个人认为 中间件 只需要注意 “顺序” 就可以了。使用方法什么的在 中间件的说明文档 中都讲得很清楚。

• 关于 中间件 的使用，这边就不多讲了，因为可用的 中间件 很多，不可能一个一个讲，等后面文章涉及哪些 中间件 再讲。