State را کجا Hoist کنیم

@Composable
private fun ConversationScreen(/*...*/) {
    val scope = rememberCoroutineScope()

    val lazyListState = rememberLazyListState() // State به ConversationScreen منتقل شده است

    MessagesList(messages, lazyListState) // استفاده دوباره از همان State در MessageList

    UserInput(
        onMessageSent = { // اعمال UI logic روی lazyListState
            scope.launch {
                lazyListState.scrollToItem(0)
            }
        },
    )
}

@Composable
private fun MessagesList(
    messages: List<Message>,
    lazyListState: LazyListState = rememberLazyListState() // LazyListState مقدار پیش‌فرض دارد
) {

    LazyColumn(
        state = lazyListState // ارسال State hoist شده به LazyColumn
    ) {
        items(messages, key = { message -> message.id }) { item ->
            Message(/*...*/)
        }
    }

    val scope = rememberCoroutineScope()

    JumpToBottom(onClicked = {
        scope.launch {
            lazyListState.scrollToItem(0) // اعمال UI logic روی lazyListState
        }
    })
}

// LazyListState.kt

@Stable
class LazyListState constructor(
    firstVisibleItemIndex: Int = 0,
    firstVisibleItemScrollOffset: Int = 0
) : ScrollableState {
    /**
     * کلاس holder برای موقعیت فعلی اسکرول
     */
    private val scrollPosition = LazyListScrollPosition(
        firstVisibleItemIndex, firstVisibleItemScrollOffset
    )

    suspend fun scrollToItem(/*...*/) { /*...*/ }

    override suspend fun scroll() { /*...*/ }

    suspend fun animateScrollToItem() { /*...*/ }
}

LazyListState، State مربوط به LazyColumn را کپسوله می‌کند و موقعیت اسکرول این UI element را در scrollPosition ذخیره می‌کند. همچنین متدهایی برای تغییر موقعیت اسکرول ارائه می‌دهد؛ مثلاً اسکرول کردن به یک آیتم مشخص.

نکته: این کلاس با @Stable مشخص شده است. برای اطلاعات بیشتر درباره Stability در Compose، مقاله مربوط به آن را ببینید.

همان‌طور که می‌بینید، افزایش مسئولیت‌های یک Composable نیاز به State holder را بیشتر می‌کند. این مسئولیت‌ها می‌توانند مربوط به UI logic باشند یا فقط به تعداد Stateهایی مربوط باشند که باید دنبال شوند.

نکته: اگر کلاس‌های State holder ساده شامل Stateای هستند که می‌خواهید پس از بازسازی Activity یا Process حفظ شود، از rememberSaveable استفاده کنید و برای آن یک Saver سفارشی بسازید.

یک الگوی رایج دیگر این است که از یک کلاس State holder ساده برای مدیریت پیچیدگی توابع Composable ریشه‌ای در اپلیکیشن استفاده کنید. می‌توانید از چنین کلاسی برای کپسوله کردن Stateهای سطح اپلیکیشن، مانند Navigation state و Screen sizing استفاده کنید. توضیح کامل این موضوع در صفحه UI logic and its state holder آمده است.

Business Logic

اگر Composableها و کلاس‌های State holder ساده مسئول UI logic و UI element state باشند، یک State holder در سطح صفحه مسئول کارهای زیر است:

• فراهم کردن دسترسی به Business logic اپلیکیشن که معمولاً در لایه‌های دیگر معماری مانند Business و Data قرار دارد.
• آماده کردن داده‌های اپلیکیشن برای نمایش در یک صفحه خاص، که تبدیل به Screen UI state می‌شود.

ViewModelها به‌عنوان مالک State

مزیت‌های AAC ViewModelها در توسعه اندروید باعث می‌شود برای فراهم کردن دسترسی به Business logic و آماده‌سازی داده‌های اپلیکیشن برای نمایش روی صفحه مناسب باشند.

نکته کلیدی: ViewModel فقط یک جزئیات پیاده‌سازی از یک State holder با مسئولیت‌های مشخص است. اگر می‌خواهید ماژول پروژه خود را از وابستگی‌های اندروید دور نگه دارید، می‌توانید از Interfaceها استفاده کنید تا پیاده‌سازی در Contextهای مختلف قابل تعویض باشد. برای مثال، می‌توانید در ماژول مخصوص اندروید از ViewModel استفاده کنید و در ماژول‌های مستقل از پلتفرم از پیاده‌سازی‌های ساده‌تر، مانند یک کلاس State holder ساده، استفاده کنید.

وقتی UI state را در ViewModel Hoist می‌کنید، آن را از Composition خارج می‌کنید.

ViewModelها به‌عنوان بخشی از Composition ذخیره نمی‌شوند. آن‌ها توسط Framework فراهم می‌شوند و به یک ViewModelStoreOwner محدود می‌شوند که می‌تواند یک Activity، Fragment، Navigation graph یا مقصدی از یک Navigation graph باشد. برای اطلاعات بیشتر درباره Scopeهای ViewModel می‌توانید مستندات مربوطه را ببینید.

در این حالت، ViewModel منبع حقیقت و پایین‌ترین والد مشترک برای UI state است.

Screen UI State

بر اساس تعریف‌های بالا، Screen UI state با اعمال Business ruleها تولید می‌شود. از آنجا که State holder سطح صفحه مسئول آن است، این یعنی Screen UI state معمولاً در State holder سطح صفحه Hoist می‌شود؛ در این مورد، داخل یک ViewModel.

ConversationViewModel یک اپلیکیشن چت را در نظر بگیرید و اینکه چگونه Screen UI state و Eventهایی برای تغییر آن را ارائه می‌دهد:

class ConversationViewModel(
    channelId: String,
    messagesRepository: MessagesRepository
) : ViewModel() {

    val messages = messagesRepository
        .getLatestMessages(channelId)
        .stateIn(
            scope = viewModelScope,
            started = SharingStarted.WhileSubscribed(5_000),
            initialValue = emptyList()
        )

    // Business logic
    fun sendMessage(message: Message) { /* ... */ }
}

@Composable
private fun ConversationScreen(
    conversationViewModel: ConversationViewModel = viewModel()
) {

    val messages by conversationViewModel.messages.collectAsStateWithLifecycle()

    ConversationScreen(
        messages = messages,
        onSendMessage = { message: Message -> conversationViewModel.sendMessage(message) }
    )
}

@Composable
private fun ConversationScreen(
    messages: List<Message>,
    onSendMessage: (Message) -> Unit
) {

    MessagesList(messages, onSendMessage)
    /* ... */
}

class ConversationViewModel(/*...*/) : ViewModel() {

    // State hoisted شده
    var inputMessage by mutableStateOf("")
        private set

    val suggestions: StateFlow<List<Suggestion>> =
        snapshotFlow { inputMessage }
            .filter { hasSocialHandleHint(it) }
            .mapLatest { getHandle(it) }
            .mapLatest { repository.getSuggestions(it) }
            .stateIn(
                scope = viewModelScope,
                started = SharingStarted.WhileSubscribed(5_000),
                initialValue = emptyList()
            )

    fun updateInput(newInput: String) {
        inputMessage = newInput
    }
}

class ConversationViewModel(/*...*/) : ViewModel() {

    val drawerState = DrawerState(initialValue = DrawerValue.Closed)

    private val _drawerContent = MutableStateFlow(DrawerContent.Empty)
    val drawerContent: StateFlow<DrawerContent> = _drawerContent.asStateFlow()

    fun closeDrawer(uiScope: CoroutineScope) {
        viewModelScope.launch {
            withContext(uiScope.coroutineContext) { // به‌جای Context پیش‌فرض استفاده شود
                drawerState.close()
            }
            // دریافت محتوای drawer و به‌روزرسانی State
            _drawerContent.update { content }
        }
    }
}

// داخل Compose
@Composable
private fun ConversationScreen(
    conversationViewModel: ConversationViewModel = viewModel()
) {
    val scope = rememberCoroutineScope()

    ConversationScreen(onCloseDrawer = { conversationViewModel.closeDrawer(uiScope = scope) })
}