Mvi架构模式开发

1,305 阅读4分钟

前言:随着谷歌推广各种设计模式,慢慢地我们好像将其当成了一种新技术来使用,觉得在新的项目必须要用上新的设计模式,就能使应用变得更加流畅和稳定。设计模式只是一种手段,不管是Mvi模式还是Mvc模式,都是来规矩我们的运行逻辑。 没有最好的设计模式,只有更适合项目业务逻辑的设计思维。

本demo的github地址为:github.com/CaesarShao/…

不过新推出的我们肯定要去试试了解。

mvi图片.png

Mvi模式采用单向流动的设计思路,用户意图Intent通过View层传输到Model,数据处理完毕之后,再返回状态State到View层显示,由此一个循环结束.一个界面的所有东西,都是不断循环在一个闭环内,所以数据的流向都能方便地监测到,哪一环出现问题就能快速地定位到问题所在.

接下来我们来看一下实际应用

举例有一个简单的新闻界面,用户去看新闻,这个界面用户能看到的,是不是就是新闻的内容,还有加载弹窗的显示与消失,我们定义一个NewState,里面定义几个接口,开始网络请求,网络请求结束,数据返回,失败信息返回.

sealed class NewState {
   object loadingNews : NewState()
   object loadingFinish : NewState()
   data class successReturn(val str: String) : NewState()
   data class failReturn(val str: String) : NewState()
}

然后我们再写一个用户的意图,也就是用户用手实际点击触摸的意图NewIntent,看新闻那就是触摸刷新.

sealed class NewIntent {
   object touchLoad: NewIntent()
}

我们再新建一个viewModel类:

class NewViewModel() : ViewModel() {
   val userIntent = Channel<NewIntent>()
   val state = MutableStateFlow<NewState>(NewState.loadingFinish)
   init {
       viewModelScope.launch {
           userIntent.consumeAsFlow().collect {
               when (it) {
                   is NewIntent.touchLoad -> {
                       loadNet()
                  }
              }
          }
      }
  }
   private fun loadNet() {//模拟网络请求
       state.value = NewState.loadingNews
       viewModelScope.launch(Dispatchers.IO) {
           delay(3000)
           val data = Random.nextInt(4)
           state.value = if (data == 0) {
               NewState.failReturn("网络请求失败,错误数据显示:"+data)
          } else {
               NewState.successReturn("网络请求成功,数据返回:"+data)
          }
           delay(100)//这边因为MutableStateFlow的特性加个延迟
           state.value = NewState.loadingFinish
      }
  }
}

其中Channel和MutableStateFlow,这两个对象可以用liveDate代替,只是一种传输工具。在viewmodel中,我们监听了用户的意图userIntent,当收到touch事件时,就去请求网络,然后将结果通过state返回给界面显示。最后,我们看一下首页的核心代码。

srlShow?.setOnRefreshListener {
           touchLoad()
      }
       viewModel?.viewModelScope?.launch {
           viewModel?.state?.collect {
               when (it) {
                   is NewState.loadingNews -> {
                       srlShow?.isRefreshing = true
                       tvShow?.text = "网络请求中.."
                  }
                   is NewState.loadingFinish -> {
                       srlShow?.isRefreshing = false
                  }
                   is NewState.successReturn -> {
                       tvShow?.text = it.str
                  }
                   is NewState.failReturn -> {
                       tvShow?.text = it.str
                  }
                   else -> {
​
                  }
              }
          }
      }
  }
   
   private fun touchLoad() {
       viewModel?.viewModelScope?.launch {
           viewModel?.userIntent?.send(NewIntent.touchLoad)
      }
  }

获取viewmodel中的userIntent意图,监听state状态返回,根据不同的结果,显示不同的UI,因为所有的意图都会转换成state从一处返回,我们就可以统一管理,出现异常的话,也容易追踪排查。这样一个简单地闭环系统就完成了。

当然,实际应用不会像demo那样简单,我们经常要监听整个app的消息,获取其他地方的消息,一个界面中,可能要监听多个state,意味着有多个闭环存在,这种情况应该怎么处理,这边给出一个简单的解决方案.

sealed class GlobalIntent {
   object touchLoad: GlobalIntent()
}
sealed class GlobalState {
   object loadingNews : GlobalState()
   object loadingFinish : GlobalState()
   data class successReturn(val str: String) : GlobalState()
   data class failReturn(val str: String) : GlobalState()
}
object GlobalReg {
   val userIntent = Channel<GlobalIntent>()
   val state = MutableStateFlow<GlobalState>(GlobalState.loadingFinish)
}
class MyApp:Application() {
   override fun onCreate() {
       super.onCreate()
       GlobalScope.launch(Dispatchers.IO) {
           GlobalReg.userIntent.consumeAsFlow().collect {
               when (it) {
                   is GlobalIntent.touchLoad -> {
                       GlobalReg.state.value = GlobalState.loadingNews
                       delay(4000)
                       GlobalReg.state.value = GlobalState.successReturn("应用项目中返回的数据")
                       delay(100)
                       GlobalReg.state.value = GlobalState.loadingFinish
                  }
              }
          }
      }
  }
}

创建2个简单地全局意图和状态,然后我们有2个界面,都订阅了全局的state。

class MainActivity : AppCompatActivity() {
GlobalScope.launch {
           GlobalReg.state.collect {
               when (it) {
                   is GlobalState.loadingNews -> {
                       Log.i("caesar","MainActivity中接收到了loadingNews")
                  }
                   is GlobalState.loadingFinish -> {
                       Log.i("caesar","MainActivity中接收到了loadingFinish")
                  }
                   is GlobalState.successReturn -> {
                       Log.i("caesar","MainActivity中接收到了successReturn:"+it.str)
                  }
                   is GlobalState.failReturn -> {
                       Log.i("caesar","MainActivity中接收到了failReturn")
                  }
                   else -> {
​
                  }
              }
          }
      }
}
class GlobalActivity : AppCompatActivity() {
   var viewModel: GlobalViewModel? = null
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_global)
       viewModel = ViewModelProvider(this).get(GlobalViewModel::class.java)
       findViewById<Button>(R.id.btn_show).setOnClickListener {
           touchLoad()
      }
       viewModel?.viewModelScope?.launch {
           GlobalReg.state.collect {
               when (it) {
                   is GlobalState.loadingNews -> {
                       Log.i("caesar","GlobalActivity中接收到了loadingNews")
                  }
                   is GlobalState.loadingFinish -> {
                       Log.i("caesar","GlobalActivity中接收到了loadingFinish")
                  }
                   is GlobalState.successReturn -> {
                       Log.i("caesar","GlobalActivity中接收到了successReturn:"+it.str)
                  }
                   is GlobalState.failReturn -> {
                       Log.i("caesar","GlobalActivity中接收到了failReturn")
                  }
                   else -> {
​
                  }
              }
          }
      }
  }
​
   private fun touchLoad() {
       viewModel?.viewModelScope?.launch {
           GlobalReg.userIntent.send(GlobalIntent.touchLoad)
      }
  }
}
I/caesar: MainActivity中接收到了loadingNews
I/caesar: GlobalActivity中接收到了loadingNews
I/caesar: MainActivity中接收到了successReturn:应用项目中返回的数据
I/caesar: GlobalActivity中接收到了successReturn:应用项目中返回的数据
I/caesar: MainActivity中接收到了loadingFinish
I/caesar: GlobalActivity中接收到了loadingFinish

在GlobalActivity中,我们发送一个全局的意图,数据经过全局的闭环之后,再返回到了我们订阅于全局state的2个Activity中,就可以获取到全局的数据了。

本demo中的例子比较的简单,主要是讲一个闭环的思路模式,其中的Channel和MutableStateFlow只不过是官方给我们提供的通道工具,我们可以按照项目的需求自己替换,甚至用eventBus也可以代替,核心就是将我们的UI和数据处理处于一个闭环的通道,使得项目按照既定的模式运行。

转载请标明出处。