在移动端开发实现Redux以Bank为例

原创

Nimyears

修改于 2025-05-10 16:38:55

12700

代码可运行

文章被收录于专栏：JetpackCompose M3JetpackCompose M3 玩转全栈

运行总次数：0

代码可运行

2025年上半年过去，我作为聋人独立开发者，学习IOS开发的反思总结，我认为移动端（ios、aos）开发的基础知识和核心思想是共通的，入门很容易，任何技术是一种工具。如果要达到精通水平，能够开发高质量、稳定、安全的复杂应用，除了扎实的逻辑能力和技术方向感之外，还需要深入理解平台特性、不断学习新的技术和最佳实践，还需要具备解决实际工程问题的丰富经验。

一、引言

在构建复杂的移动app时，尤其像银行涉及敏感数据和复杂业务流程，说明了状态管理很重要，例如，用户账户余额、交易记录、账户详情、支付状态等，这些都是应用的核心状态。这些状态需要Screen、Component之间实时同步、安全地共享和精确地更新。

想象一下一个银行应用：用户查看账户列表、进入某个账户查看余额和最近交易、发起转账、接收推送通知更新余额。这些操作和事件都会导致应用状态的变化，并且这些变化需要立即反映在相关的界面上。如果状态管理不当，可能导致数据不一致、更新混乱，甚至引发严重的安全问题，在金融应用中是绝对不能接受的。

本文以一个简化的银行应用场景为例，深入了解如何在 aOS和iOS平台中实现 Redux模式进行状态管理。

二、理解应用中的Redux流程

用户点击“存款”按钮 -> 应用分发一个包含存款金额的 DepositAction -> Store 接收到 Action -> Store 将当前 State 和 DepositAction 一起传递给 Reducer -> Reducer 计算出新的 State (余额增加) -> Store 更新其内部状态为新的 State -> UI 监听到 Store 的状态变化 -> UI 重新渲染UI，显示新的余额。

三、AOS平台实现Redux State管理

构建一个简化的银行账户界面演示

1 定义 State

创建一个 Kotlin 数据类来表示银行相关的状态，包含账户余额和交易列表。

// State.kt
data class BankingState(
    val balance: Double = 0.0, // 账户余额，默认为 0.0
    val recentTransactions: List<String> = emptyList() // 最近交易列表，默认为空
    // ... 其他状态字段
)

2. 定义 Action

密封类所有可能的状态变化动作。例如，存款、取款和加载交易记录。

// Action.kt
sealed class BankingAction {
    //存款动作，带存款金额
    data class Deposit(val amount: Double) : BankingAction()

    //取款动作，带取款金额
    data class Withdrawal(val amount: Double) : BankingAction()

    //加载交易记录，带交易记录列表
    data class SetTransactions(val transactions: List<String>) : BankingAction()
    //其他Action
}

3. 实现 Reducer

编写纯函数，接收当前的 BankingState 和一个 BankingAction，返回一个新的 BankingState

// Reducer.kt
val bankingReducer: Reducer<BankingState> = { state, action ->
    //Reducer根据Action的类型和数据计算新的状态
    when (action) {
        is BankingAction.Deposit -> {
            //处理存款：创建一个新的状态，金额加到余额
            state.copy(balance = state.balance + action.amount)
        }
        is BankingAction.Withdrawal -> {
             //处理取款：创建一个新的状态，从余额中减去金额
             //注意：实际银行需要更复杂的逻辑处理支出、手续费等
            state.copy(balance = state.balance - action.amount)
        }
        is BankingAction.SetTransactions -> {
             //处理设置交易记录Action：创建一个新的状态，更新交易列表
            state.copy(recentTransactions = action.transactions)
        }
        else -> {
            //返回当前状态（不改变）
            state
        }
    }
}

4. 创建 Store

// AppStore.kt
val appStore = createStore(bankingReducer, BankingState())

5. Jetpack Compose使用Redux State

//BankingScreen.kt
@Composable
fun BankingScreen() {
    //selectState只监听Store中关心的那个部分状态
    //balanceState是State<Double>，当Store中余额变化时更新
    val balanceState = selectState(appStore) { state -> state.balance }
    val currentBalance = balanceState.value //获取当前余额

    //transactionsState是State<List<String>>，当Store中交易记录变化时更新
    val transactionsState = selectState(appStore) { state -> state.recentTransactions }
    val recentTransactions = transactionsState.value //获取交易记录列表

    //rememberDispatcher获取Store的dispatch函数
    val dispatch = rememberDispatcher(appStore)

    // 模拟加载交易记录（处理VM或Effect处理）
    LaunchedEffect(Unit) {
        //首次出现时，模拟加载交易记录并分发Action
        //网络请求的结果
        val loadedTransactions = listOf("Deposit +100.0", "Withdrawal -50.0", "Deposit +200.0")
        dispatch(BankingAction.SetTransactions(loadedTransactions))
    }


    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "当前余额:", fontSize = 18.sp)
        Text(
            text = "$${String.format("%.2f", currentBalance)}", //格式化余额显示
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(bottom = 16.dp)
        )

        Row(
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Button(onClick = {
                //点击存款按钮，分发Deposit Action (假设存入100)
                dispatch(BankingAction.Deposit(100.0))
            }) {
                Text("存款 +100")
            }
            Button(onClick = {
                //点击取款按钮，分发Withdrawal Action (假设取出50)
                dispatch(BankingAction.Withdrawal(50.0))
            }) {
                Text("取款 -50")
            }
        }

        Spacer(modifier = Modifier.height(24.dp))

        Text(text = "最近交易:", fontSize = 18.sp, modifier = Modifier.align(Alignment.Start))

        LazyColumn(
            modifier = Modifier.fillMaxWidth()
        ) {
            items(recentTransactions) { transaction ->
                Text(text = transaction, modifier = Modifier.padding(vertical = 4.dp))
            }
        }
    }
}