UI架构模式——MVI

UI 架构模式 ——MVI#

MVC/MVVM/MV 的问题#

MVC/MVVM/MV 都将 View 和 Model 分离，Model/ViewModel/StatefulModel 中需要处理和保存 View 的状态，因此当页面交互和组件开发变得复杂时，难以保证整个应用的状态一致性。

什么是 MVI#

MVI 模式全称 Model-View-Intent 模式。MVI 将处理逻辑分为三部分：Model、View 和 Intent。Model 负责处理数据和业务逻辑，View 负责渲染 UI 和用户交互，Intent 则负责消息传递，将用户输入的动作、View 的事件、Model 的状态变化等封装成 Intent，将 Intent 发送给 Model，Model 处理后再发送给 View 进行渲染。这种方式保证了整个应用状态的一致性，并能够比较方便地处理复杂的 UI 状态同步问题。

View(Model(Intent()))

MVI 与 MVC/MVVM/MV 有什么不同#

与 MVC/MVVM/MV 相比，MVI 更加关注数据流与状态管理，强调单向数据流和单一可信来源原则。MVC/MVVM/MV 都可以采用 MVI 中的数据流和状态管理思想来进行改进，使得应用更加易于维护和扩展。因此，MVI 不是完全独立于 MVC/MVVM/MV 的，而是一种基于它们的深度实践和扩展。

MVI 的使用#

MVI 使用统一状态解决 ui 状态一致性问题，使用 Intent-Reducer-State 单向数据流解决状态之间的复杂关系。

selector : (state)->state
render : (state)

[View]
package ViewModel {
[UiState]
[UiIntent]
[Reducer]
}
[UiState] -up-> [View] : observe(selector,render)
[View] -down-> [UiIntent] : dispatch(intent)
[UiIntent] -down-> [Reducer]
[Reducer] -up-> [UiState] : reduce(intent,state) -> state

MVI 和组合模式#

在 MVI 架构中，每个界面组件都拥有自己独立的 State 和 Intent，这些 State 和 Intent 会通过组合的方式构成整个界面的 State 和 Intent。通过这种方式，我们可以更好地管理界面状态和用户行为，代码组织更加清晰，可维护性更高，在开发大型应用时也能提高效率。

class Page
class View1
class View2
class View1State
class View2State
class PageState
Page *-left- View1
Page *-right- View2
PageState *-left- View1State
PageState *-right- View2State
View1 -down-> View1State
View2 -down-> View2State

data class View1Intent
data class View2Intent
data class PageIntent{
	View1(val state:View1State):PageIntent
	View2(val state:View2State):PageIntent
}
fun dispatch(intent:PageIntent){
	when(intent){
		is View1 -> dispatch(View1.sate)
		is View2 -> dispatch(View2.sate)
	}
}