Flux、Redux到react-redux发展衍变之Flux解读

布满荆棘的人生 2021-09-17 02:30 339阅读 0赞

react开发中，组件直接传递参数需要props一层层代理，对于复杂组件，它可能嵌套的子组件非常多，层级也比较深，那么，如果还采用props链条来维护组件通信或者数据共享，将非常困难，也不利于开发和维护。因此，衍生出了Flux、Redux和react-redux，本篇主要介绍Flux。

Flux框架也是一种MVC框架，它采用**单向数据流**，不允许Model和Control互相引用。Flux框架大致如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

Views：视图界面，如react组件等渲染标签的文件

Action：驱动Dispatcher，只要Store中有注册Dispatcher监听，就可以获取到Action想要执行的动作数据。

Dispatcher：负责分发，关联Action（接收方）与Store（处理方）

Store：状态变化的逻辑处理、状态存储

**Flux Demo演示代码：[https://github.com/smallH/react-flux-demo.git][https_github.com_smallH_react-flux-demo.git]**

通过该Demo大家可以了解到Flux的运行机制，那么直接看代码吧，先看看组件树的顶层 ：

// FluxDemo.jsx
    import React from 'react';
    import FluxView from './FluxView.jsx';
    import FluxStore from './FluxStore.js';
    
    class FluxDemo extends React.Component {
    	constructor(props) {
    		super(props);
    		this.state = {
    			data: FluxStore.getData()
    		};
    		this.onChange = this.onChange.bind(this);
    	}
    
    	componentDidMount() {
    		FluxStore.addChangeListener(this.onChange);
    	}
    
    	componentWillUnmount() {
    		FluxStore.removeChangeListener(this.onChange);
    	}
    
    	onChange() {
    		const newData = FluxStore.getData();
    		this.setState({
    			data: newData
    		});
    	}
    
    	render() {
    		return(
    			<div>
    				<FluxView data={this.state.data}/>
          		        </div>
    		);
    	}
    }
    
    export default FluxDemo;

从这段代码很明显可以看出，组件树的顶层除了渲染子组件FluxView外什么事情都不干，所有控制权都交给了store，而且并没有任何处理子组件的逻辑业务（逻辑都放在了store中处理）。它有两个重要步骤：（1）挂载完成和卸载时，要添加/移除store中监听；（2）传递到子组件的状态必须从store中获得。简单来说，就是store告诉我改变什么数据来源，我就做什么。

再看看被渲染的子组件FluxView，该组件主要模拟了通过点击事件触发Action操作：

// FluxView.jsx
    import React from 'react';
    import FluxAcion from './FluxAcion';
    
    class FluxView extends React.Component {
    	constructor(props) {
    		super(props);
    		this.state = {};
    		this.newHandle = this.newHandle.bind(this);
    		this.updateHandle = this.updateHandle.bind(this);
    	}
    
    	newHandle() {
    		FluxAcion.newData("[new action]");
    	}
    
    	updateHandle() {
    		FluxAcion.updateData("[update action]");
    	}
    
    	render() {
    		return(
    			<div>
    				current data is ======= {this.props.data}
    				<div>
    					<button onClick={this.newHandle}>execute action [New] </button>
    					<button onClick={this.updateHandle}>execute action [Update] </button>
    					<button>...</button>
    				</div>
          		        </div>
    		);
    	}
    }
    
    export default FluxView;

这一步，我告诉了Action我触发了什么事件，如newData还是updaDate，这就够了，其他的事情交给Action去干就好，现在我们看看Action是如何联系Dispatcher模块去影响Store的：

// FluxDispatcher.js
    import { Dispatcher } from 'flux';
    
    const FluxDispatcher = new Dispatcher();
    export default FluxDispatcher;
    
    // FluxConstants.js
    const FluxContants = {
    	NEW: 'NEW',
    	UPDATE: 'UPDATE'
    };
    
    export default FluxContants;
    
    // FluxAcion.js
    import FluxConstants from './FluxConstants';
    import FluxDispatcher from './FluxDispatcher';
    
    const FluxAcion = {
    	newData(data) {
    		// Dispatcher 触发
    		FluxDispatcher.dispatch({
    			type: FluxConstants.NEW,
    			value: data
    		});
    	},
    	updateData(data) {
    		// Dispatcher 触发
    		FluxDispatcher.dispatch({
    			type: FluxConstants.UPDATE,
    			value: data
    		});
    	}
    }
    
    export default FluxAcion;

Action也不做任何逻辑处理，只负责驱动了Dispatcher，通过.dispatch()分发任务，这时若store有注册了Dispatcher监听，就可以拿到Dispatch分发过来的任务，这样整个闭环功能就完整连接起来了。最后，看看Flux最核心的store：

// FluxStore.js
    import { EventEmitter } from 'events';
    import FluxDispatcher from './FluxDispatcher';
    import FluxConstants from './FluxConstants';
    
    let data = "[default]";
    
    // store 构造
    const store = Object.assign({}, EventEmitter.prototype, {
    	getData: function() {
    		return data;
    	},
    
    	emitChange: function() {
    		this.emit('change');
    	},
    
    	addChangeListener: function(callback) {
    		this.on('change', callback);
    	},
    
    	removeChangeListener: function(callback) {
    		this.removeListener('change', callback);
    	}
    });
    
    // Dispatcher 注册
    FluxDispatcher.register((action) => {
    	switch(action.type) {
    		case FluxConstants.NEW:
    			data = action.value + "+ 数据操作所需的逻辑处理...";
    			store.emitChange();
    			break;
    		case FluxConstants.UPDATE:
    			data = action.value + "+ 数据操作所需的逻辑处理...";
    			store.emitChange();
    			break;
    		default:
    			break
    	}
    
    });
    export default store;

store实现了从Dispatcher处得到数据来源和类型，然后对数据的进行逻辑处理，并向外提供了一个getData()的接口，让组件可以获取变化后的状态数据，这一整套下来的模式就是Flux。

![20181125134612239.jpg][]

![20181125134629939.jpg][]

通过点击按钮去驱动\[New\] Action 和 \[update\] Action 实现当前data状态的变化。

Flux有三个缺点：

1. 一个应用可以拥有多个store、action，多个store直接可能有依赖关系。

2. Store封装了数据和处理数据的逻辑，state已经被暴露出来谁都可以改变。

3. 使用Flux的组件复用性差，具有Flux元素耦合，不符合react设计思想。

因而，Redux出现了，并通过很巧妙的方式解决了这些缺点。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210813/6b00fbef02d24cf6b3a1617e8debdcee.png
[https_github.com_smallH_react-flux-demo.git]: https://github.com/smallH/react-flux-demo.git
[20181125134612239.jpg]: /images/20210813/1f8f7eb63bc0439c8cc252f1f37a8829.png
[20181125134629939.jpg]: /images/20210813/3e69ed4f99a644c0a3de522c44132dcd.png