使用MVI构建响应式安卓程序[译]

作者: PcDack | 来源:发表于2018-01-02 14:56 被阅读417次

Model-View-Intent是安卓最新的设计模式。它的灵感来自于于André Staltz的Cycle.js ,并且被 Hannes Dorfmann适配到安卓世界。

这篇文章描述MVI设计模式，并且像你展示如何创建一个用MVI设计模式的基础的Hello World程序。你可能会问，为什么要使用这个模式在一个没有任何意义的应用程序上?还有一些其他复杂的MVI例子(在文章末尾的推荐阅读里)，我们都能学到不同的东西。对我个人而言，一个简单的如hello world一样的程序，在我探索一个新东西的时候，更让我豁然大悟的。我希望这篇文章可以帮你掌握MVI的基础使用，并且期望你能在复杂的应用程序里面去应用，去深入。
这篇文章的Kotlin源码在 Github上。

Model-View-Intent

你可能看过Model在其他的设计模式比如MVC,MVP或者MVVP。但是MVI的Model和其他设计模式的完全不一样:

Model 代表一种状态(数据的显示，你的控件的可视或者隐藏，RecyclerView的滑动位置等等)。Model在MVI中比其他的设计模式更加的形式化。你应用的一个页面可能包含一个或多个Model对象。Model在一个Domain层被定义和管理。使其不变是很重要的－－每一个请求结果都绑定一个新的Model实例。这保证了可预测的结果和可测试性。
View 代表一个定义一系列用户动作的可观察对象的接口和一个render(ViewState)方法
Intent 不是android.content.Intent !这个Intent 简单的说是一种意图，或者说一种动作，或者说一种用户与APP交互产生的命令。对于每一个用户动作（意图）被View分发，被Presenter 观察（是的，MVI也是有Presenter 的）.

这个图片记录了这个模式的响应，循环，数据流动的方向。我们的Model/State(PS:图中翻译为状态)是被Domain层管理的(只有一个来源)，用来对用户动作做出反应。无论如何,新的Model被创建，那么相应的View被更新，如果，想要获得更多细节，我推荐一个系列文章帮助你开始使用MVI模式http://hannesdorfmann.com/android/mosby3-mvi-1

让我们愉快的写代码吧

在我们这个例子中，我们的UI界面有一个按钮，当我们点击按钮会产生Loading指示符，紧接着显示四种语言中的其中一种语言的"Hello World"。

AppUi.png

下面是我们的文件结构，好像不是很吓人，难道不是么（滑稽.png）?毕竟这是对MVI模式比较简单的描述。

mosbymvi
  MainActivity
  HelloWorldView
  HelloWorldPresenter
mosbymvi.domain
  GetHelloWorldTextUseCase
  HelloWorldViewState
mosbymvi.data
  HelloWorldRepository

我选择使用以下依赖：

dependencies {
    // Mosby
    implementation "com.hannesdorfmann.mosby3:mvi:$mosbyVersion"

    // RxBinding
    implementation "com.jakewharton.rxbinding2:rxbinding-kotlin:$rxBindingVersion"
    implementation "com.jakewharton.rxbinding2:rxbinding-support-v4-kotlin:$rxBindingVersion"
    implementation "com.jakewharton.rxbinding2:rxbinding-appcompat-v7-kotlin:$rxBindingVersion"

     // RxJava and RxAndroid
     implementation "io.reactivex.rxjava2:rxjava:$rxJavaVersion"
     implementation "io.reactivex.rxjava2:rxandroid:$rxAndroidVersion"
}

View

HelloWorldView是我们的View接口，这个接口定义了两个方法－所有的方法，我们都需要在这个例子中展示：

sayHelloWorldIntent() 将触发我们的意图(intent)/动作(action)/命令(command) 去显示 HelloWorld 文字。
render(state:HelloWorldViewState) 将被用来渲染最新的状态

interface HelloWorldView : MvpView {
    /**
     * Emits button clicks as Observables
     */
    fun sayHelloWorldIntent(): Observable<Unit>

    /**
     * Render the state in the UI
     */
    fun render(state: HelloWorldViewState)
}

简单起见，我们在Activity中实现上面的View接口:

class MainActivity : MviActivity<HelloWorldView, HelloWorldPresenter>(), HelloWorldView {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun createPresenter() = HelloWorldPresenter()

    override fun sayHelloWorldIntent() = helloWorldButton.clicks()

    override fun render(state: HelloWorldViewState) {
        when(state) {
            is HelloWorldViewState.LoadingState -> renderLoadingState()
            is HelloWorldViewState.DataState -> renderDataState(state)
            is HelloWorldViewState.ErrorState -> renderErrorState(state)
        }
    }

    private fun renderLoadingState() {
        loadingIndicator.visibility = View.VISIBLE
        helloWorldTextview.visibility = View.GONE
    }

    private fun renderDataState(dataState: HelloWorldViewState.DataState) {
        loadingIndicator.visibility = View.GONE
        helloWorldTextview.apply {
            visibility = View.VISIBLE
            text = dataState.greeting
        }
    }

    private fun renderErrorState(errorState: HelloWorldViewState.ErrorState) {
        loadingIndicator.visibility = View.GONE
        helloWorldTextview.visibility = View.GONE
        Toast.makeText(this, "error ${errorState.error}", Toast.LENGTH_LONG).show()
    }
}

那么，我们来看一下sayHelloWorldIntent()方法

 override fun sayHelloWorldIntent() = sayHelloWorldButton.clicks()

这个按钮的点击被转化成了Observale<Unit> 因此我们的Presenter 可以观察，并做出反应。我们用 Jake Wharton 的RxBinding 来实现。

注意，render(state: HelloWorldViewState) 方法被我们的Presenter 调用去渲染最新的UI。

至于调用renderLoadingState(),renderDataState(),renderErrorState()中的哪一个，主要是取决于ViewState。每个函数都是自包含的代码块，它们将更改UI，来展示最新状态。不需要从Presenter到View反复多次调用来反应当前状态。

override fun render(state: HelloWorldViewState) {
        when(state) {
            is HelloWorldViewState.LoadingState -> renderLoadingState()
            is HelloWorldViewState.DataState -> renderDataState(state)
            is HelloWorldViewState.ErrorState -> renderErrorState(state)
        }
    }

Presenter

这个地方就展现出Mosby这个库，闪光的地方！Presenter中的很多代码都已经帮我们集成好了。我们只需要做的是

a).通过业务逻辑，来定义如何处理Presenter

b).订阅View到ViewState观察流，我们可以根据最新的ViewState渲染不同的UI状态:

class HelloWorldPresenter : MviBasePresenter<HelloWorldView, HelloWorldViewState>() {
    override fun bindIntents() {
        val helloWorldState: Observable<HelloWorldViewState> = intent(HelloWorldView::sayHelloWorldIntent)
                .subscribeOn(Schedulers.io())
                .debounce(400, TimeUnit.MILLISECONDS)
                .switchMap { GetHelloWorldTextUseCase.getHelloWorldText() }
                .doOnNext { Timber.d("Received new state: " + it) }
                .observeOn(AndroidSchedulers.mainThread())

        subscribeViewState(helloWorldState, HelloWorldView::render)
    }
}

我们使用Mosby的bindIntents()方法去：

在MVI设计模式中观察UI事件也被称作Intent/动作(action)/命令(commands)。注意我们用使用RxJava中 debounce() 操作来避免快速点击按钮的事件处理。
将这些意图(intents)映射到Domain层。在这种情况下，sayHelloWorldIntent() 将被GetHelloWorldTextUseCase.getHelloWorldText() 调用。内部的,Mosby用PublishSubject 去处理意图(intents)并且放置内存泄露。
渲染发射状态(加载状态，数据返回状态或者是错误状态)到UI上来。与View通信，subscribeViewState()用BehaviorSubject 来发出最近观察到的ViewState，以及后续的ViewState。它可以让View知道自己的最新状态，就算是设备旋转。

注意：因为Mosby内部使用RxJava，这里对我们来说不需要clear() ViewState的Disposables－Mosby可以自动的在视图分离的时候销毁掉。

注意：在这个小例子中我不利用Cycle.js/Redux/MVI中的核心内容里的 State reducers 。反馈多个用户意图（Intents）来让系统生成当前状态。我们可以使用RxJava中的merge() 和scan() 操作来实现它。你可以在这里学习更多关于reducing 状态

Domain 层

Domain层包含了根据用户操作生成的各种视图状态(View State)生成的Case/Interactor。

View State

Kotlin的封闭类十分的适合ViewState,但是可以用不同的方式来生成ViewState。

package com.jshvarts.mosbymvi.domain

sealed class HelloWorldViewState {
    object LoadingState : HelloWorldViewState()
    data class DataState(val greeting: String) : HelloWorldViewState()
    data class ErrorState(val error: Throwable) : HelloWorldViewState()
}

使用Case/Interactor

简单的说，我们用唯一的GetHelloWorldTextUseCase 。在生产环境中，你需要注入Case到你的Presenter层——更多细节请阅读有关Clean Architecture的内容。

Domain/业务逻辑层对于MVP和MVVM是十分重要的，但是对于MVI，更进一步。这是我们定义和生成不同的Models/View状态的地方。Models是一成不变的——每一次业务逻辑的请求产生一个或多个新的Model对象，它可以渲染UI。

/**
 * In a Production app, inject your Use Case into your Presenter instead.
 */
object GetHelloWorldTextUseCase {
    fun getHelloWorldText(): Observable<HelloWorldViewState> {
        return HelloWorldRepository.loadHelloWorldText()
                .map<HelloWorldViewState> { HelloWorldViewState.DataState(it) }
                .startWith(HelloWorldViewState.LoadingState)
                .onErrorReturn { HelloWorldViewState.ErrorState(it) }
    }
}

我们一行一行的看GetHelloWorldTextUseCase#getHelloWorldText()

// 调用存储库来获取数据
HelloWorldRepository.loadHelloWorldText()
//创建DataState并将其转换为HelloWorldViewState
.map<HelloWorldViewState> { HelloWorldViewState.DataState(it) }
// 在发射数据之前发射LoadingState值
.startWith(HelloWorldViewState.LoadingState())
// 不要抛出错误 - 改为发出错误状态
.onErrorReturn { HelloWorldViewState.ErrorState(it) }

我们添加了log 在Presenter的doOnNext()函数，当按钮点击，我们如果可以看到下面的内容那么我们成功了

Received new state: HelloWorldViewState$LoadingState
Received new state: DataState(greeting=Hello World)

如果产生了错误(IllegalStateException)，这个Log将包含下面内容:

Received new state: HelloWorldViewState$LoadingState
Received new state: ErrorState(error=java.lang.IllegalArgumentException)

Data层

简单地说，我们的Data层仅仅包含了一个子类，HelloWorldRepository ,这个子类每次调用生成一个随机产生HelloWorld的可观察流。

object HelloWorldRepository {

    fun loadHelloWorldText(): Observable<String> = Observable.just(getRandomMessage())

    private fun getRandomMessage(): String {
        val messages = listOf("Hello World", "Hola Mundo", "Hallo Welt", "Bonjour le monde")
        return messages[Random().nextInt(messages.size)]
    }
}

使用MVI构建响应式安卓程序[译]

Model-View-Intent

让我们愉快的写代码吧

View

Presenter

Domain 层

View State

推荐阅读(文章几乎都要翻墙)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android开发架构

JAVA设计模式

android架构

Android进阶之路

Android开发

Android开发经验谈

Android技术知识

程序员