redux 及在Android上应用 rekotlin

什么是redux

redux 的概念来源于前端,是一个“可预测的状态容器”,采用“单向数据流”的思想,目的是为了让JS的状态管理变得更加可预期。

为什么使用redux

redux 存在的目的是为了解决组件之间的通信以及集中保存管理项目的状态。随着项目变得越来越大,组件之间的通信越来越复杂,状态越来越多,项目就变得难以维护。
使用redux管理状态,是将所有状态都保存在store中,各组件可以直接从store中获取到自己需要的状态。这样将全局状态保存到一处统一管理,使项目更加容易维护,组件之间的通信更加清晰。

不使用Redux和使用Redux时父子组件之间的通信方式
  • 没有使用Redux的情况,如果两个组件(非父子关系)之间需要通信的话,可能需要多个中间组件为他们进行消息传递,这样既浪费了资源,代码也会比较复杂。
  • Redux中提出了单一数据源Store用来存储状态数据,所有的组件都可以通过Action修改Store,也可以从Store中获取最新状态,使用redux可以完美解决组件之间的通信问题。

4 张动图解释为什么(什么时候)使用 Redux

redux的核心概念及rekotlin的应用

redux的工作流程


rekotlin的工作流程

Store

  • Store可以看作一个状态容器,一个应用只能有一个Store。Store提供一些方法用于存取状态,分发状态及注册监听。以下是rekotlin中对于Store的接口定义中的几个常用方法
interface StoreType<State: StateType>: DispatchingStoreType {

    /**
     * 当前Store中存储的State
     */
    val state: State

    /**
     * 所有方便的 `dispatch` 方法使用的主要调度函数。
     * 这个调度功能可以通过提供中间件来扩展。
     * typealias DispatchFunction = (Action) -> Unit
     */
    var dispatchFunction: DispatchFunction

    /**
     * 将订阅者注册到Store,当Store中的State发生改变时,订阅者的`newState`方法将被调用
     */
    fun <S: StoreSubscriber<State>> subscribe(subscriber: S)

    /**
     * 解注册订阅者,State更新时订阅者将不再收到通知
     */
    fun <SelectedState> unsubscribe(subscriber: StoreSubscriber<SelectedState>)

    /**
     * 分发一个Action用于修改Store中的State
     *(这是DispatchingStoreType中定义的方法)
     */
    fun dispatch(action: Action)
    
    ···
}

State

  • State代表状态,是某个时刻表示一个View渲染所需所有数据状态的集合,实际上是一个状态树。
    Redux 规定,一个 State 对应一个 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什么样,反之亦然。
interface StateType

data class ViewState(
    // 表示当前State对应的View中渲染所需内容
    val isVisible: Boolean = true,
    val titleText: String = "title",
    // 表示子View对应的State,形成一个状态树
    val statusLayerState: StatusLayerState? = null,
    val businessLayerState: BusinessLayerState? = null
) : StateType

kotlin中使用data class表示State,方便进行copy()操作

Action

  • State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。
/**
 * 所有被分发的Action都需要实现这个接口
 */
interface Action

class ViewVisibleAction(val isVisible: Boolean) : Action

Reducer

  • Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
  • Reducer 是一个纯函数,它接收 Action 和当前 State 作为参数,返回一个新的 State。
fun viewReducer(action: Action, viewState: ViewState?): ViewState {
      var newState = viewState ?: viewState()
      when(action) {
            is ViewVisibleAction -> {
                  newState = newState.copy(isVisible = action.isVisible)
            }
      }
      newState = newState.copy(statusLayerState = statusLayerReducer(action, viewState?.statusLayerState))
      newState = newState.copy(businessLayerState = businessLayerReducer(action, viewState?.businessLayerState))
      return newState
}

fun statusLayerReducer(action: Action, statusLayerState: StatusLayerState?): StatusLayerState {
      ···
}

fun businessLayerReducer(action: Action, businessLayerState: BusinessLayerState?): BusinessLayerState {
      ···
}

Reducer 函数最重要的特征是,它是一个纯函数。也就是说,只要是同样的输入,必定得到同样的输出。
由于 Reducer 是纯函数,就可以保证同样的State,必定得到同样的 View,任何时候,与某个 View 对应的 State 总是一个不变的对象。但也正因为这一点,Reducer 函数里面不能改变 State,必须返回一个全新的对象。因而State最好是只读的。

高阶用法 Middleware

  • Middleware中间件,在store.dispatch()分发Action到Reducer之间被调用,常用于添加、改造功能。


// typealias别名,仅做内联替换,不生成新的函数
typealias DispatchFunction = (Action) -> Unit
typealias Middleware<State> = (DispatchFunction, () -> State?) -> (DispatchFunction) -> DispatchFunction

class viewMiddleware(): Middleware<ViewState> {
    override fun invoke(
        p1: DispatchFunction,
        p2: () -> ViewState?
    ): (DispatchFunction) -> DispatchFunction {
        return fun(next: DispatchFunction): (Action) -> Unit {
            return fun(action: Action) {
                next(action)
            }
        }
    }
}

Store中dispatchFunction的实现

    override var dispatchFunction: DispatchFunction = middleware
            .reversed()
            .fold({ action: Action -> this._defaultDispatch(action) }, { dispatchFunction, middleware ->
                val dispatch = { action: Action -> this.dispatch(action) }
                val getState = { this._state }
                middleware(dispatch, getState)(dispatchFunction)
            })

redux的三大原则

  • Single source of truth 单一数据源
    • The global state of your application is stored in an object tree within a single store. 应用的全局状态以树的形式存储在单一store中
  • State is read-only 状态只读
    • The only way to change the state is to emit an action, an object describing what happened. 唯一改变state的方式是发送一个表示发生了什么的action
  • Changes are made with pure functions 变化由纯函数计算
    • To specify how the state tree is transformed by actions, you write pure reducers. 编写纯函数去通过actions计算state发生了什么变化

redux使用场景

“如果你不知道是否需要 Redux,那就是不需要它。”

  • 如果你的UI层非常简单,没有很多互动,redux 就是不必要的,用了反而增加复杂性。在应用程序增长到管理状态变得麻烦的规模的情况下,可以使用redux,使状态管理和溯源变得容易和简单。所以总体原则是能不用就不用, 实在干不动了再用。
  • 某个组件的状态,需要共享。
  • 某个状态需要在任何地方都可以拿到。
  • 一个组件需要改变全局状态。
  • 一个组件需要改变另一个组件的状态。

使用redux的优势

状态可预测:相同的State和Action传递给Reducer,输出的结果总是相同的(纯函数特性)。且当你需要修改状态时,必须重新开始走一个修改的流程,这种限制状态修改的方式,让状态变得可预测,容易调试。
可维护性:具有 Redux 知识的人更容易理解任何 Redux 应用程序的结构,且有助于用户将业务逻辑与组件树分离。
单向数据流:所有状态的改变可记录、可跟踪,源头易追溯,数据具有唯一出口和入口,使得数据操作更直观更容易理解。

引申

单向数据流和双向绑定的优缺点对比

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容