从Flux到Redux详解单项数据流

从Flux到Redux是状态管理工具的演变过程,但两者还是有细微的区别的。但是最核心的都还是观察者模式的应用。

一、Flux

1. Flux的处理逻辑

通俗来讲,应用的状态被放到了store中,组件是store状态的一个映射,用户通过事件触发action,再通过Dispatcher根据不同的actionType进行分发,并做不同的逻辑处理,但核心都是通过直接改变store的状态,再触发emitChange间接改变组件中的数据。(后面会上代码)

从Flux到Redux详解单项数据流

 

从代码层面来讲,store中的数据通过EventEmitter注册监听,并通知引入此store的组件状态变化,view中的数据实时通过store获取,action中则是通过AppDispatcher分发,而注册后的AppDispatcher则根据对应的actionTypes做不通的逻辑处理。

常规方法使用Flux需要引入的库有:Dispatcher,EventEmitter

 

2. Flux的劣势:

1.Flux可以有多个store,而当逻辑复杂时,多个store的依赖会非常繁琐。异步操作也不是很友好。

2. 难以进行服务端渲染,同构成本较高。

3. store混杂了处理逻辑与状态。

 

3. Flux项目的关联核心代码:

js/countPanel.js

类的构造函数初始化store的数据:

constructor (props) {   super(props);   this.state = {max: 15, fluxData: CounterValues};   this.setMax = this.setMax.bind(this);   this.totalChange = this.totalChange.bind(this);   this.fluxTest = this.fluxTest.bind(this); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspzyf.html