State

dependencies {
      ...
      implementation("androidx.compose.runtime:runtime-rxjava3:1.11.3")
}

نکته کلیدی:
Compose هنگام خواندن objectهای State به‌صورت خودکار Recomposition انجام می‌دهد. اگر در Compose از نوع observable دیگری مانند LiveData استفاده می‌کنید، باید قبل از خواندن آن، آن را به State تبدیل کنید. مطمئن شوید این تبدیل نوع داخل یک Composable و با استفاده از یک extension function مانند LiveData<T>.observeAsState() انجام می‌شود.

نکته:
شما به این یکپارچه‌سازی‌ها محدود نیستید. می‌توانید برای Jetpack Compose یک extension function بسازید که انواع observable دیگر را بخواند. اگر اپلیکیشن شما از یک کلاس observable سفارشی استفاده می‌کند، آن را با استفاده از API به نام produceState به State<T> تبدیل کنید.

هر شیئی که به Jetpack Compose اجازه دهد در هر تغییر مشترک شود، می‌تواند به State<T> تبدیل شده و داخل یک Composable خوانده شود.

Stateful در برابر Stateless

یک Composable که از remember برای ذخیره یک شیء استفاده می‌کند، State داخلی ایجاد می‌کند و بنابراین آن Composable، Stateful می‌شود.

HelloContent نمونه‌ای از یک Composable دارای State است، چون State مربوط به name را به‌صورت داخلی نگه می‌دارد و تغییر می‌دهد. این موضوع می‌تواند در موقعیت‌هایی مفید باشد که caller نیازی به کنترل State ندارد و می‌تواند بدون مدیریت State از آن استفاده کند.

با این حال، Composableهایی که State داخلی دارند معمولاً کمتر قابل استفاده مجدد هستند و تست کردن آن‌ها سخت‌تر است.

یک Composable بدون State یا Stateless، Composableای است که هیچ Stateای را نگه نمی‌دارد. یک راه ساده برای رسیدن به Stateless بودن، استفاده از State hoisting است.

وقتی Composableهای قابل استفاده مجدد توسعه می‌دهید، معمولاً می‌خواهید هم نسخه Stateful و هم نسخه Stateless همان Composable را ارائه دهید. نسخه Stateful برای callerهایی مناسب است که به State اهمیت نمی‌دهند، و نسخه Stateless برای callerهایی ضروری است که نیاز دارند State را کنترل یا Hoist کنند.

State hoisting

State hoisting در Compose الگویی است که در آن State به caller مربوط به Composable منتقل می‌شود تا Composable بدون State شود.

الگوی کلی State hoisting در Jetpack Compose این است که متغیر State را با دو پارامتر جایگزین کنید:

value: T
مقدار فعلی که باید نمایش داده شود.

onValueChange: (T) -> Unit
رویدادی که درخواست تغییر مقدار را می‌دهد؛ در اینجا T مقدار جدید پیشنهادی است.

البته شما محدود به onValueChange نیستید. اگر رویدادهای مشخص‌تری برای Composable مناسب هستند، باید آن‌ها را با استفاده از lambdaها تعریف کنید.

Stateای که به این روش Hoist می‌شود چند ویژگی مهم دارد:

Single source of truth:
با منتقل کردن State به‌جای کپی کردن آن، مطمئن می‌شویم که فقط یک منبع حقیقت وجود دارد. این کار به جلوگیری از باگ‌ها کمک می‌کند.

Encapsulated:
فقط Composableهای دارای State می‌توانند State خودشان را تغییر دهند. این State کاملاً داخلی است.

Shareable:
State Hoist شده می‌تواند با چند Composable به اشتراک گذاشته شود. اگر بخواهید name را در یک Composable دیگر بخوانید، Hoisting این امکان را فراهم می‌کند.

Interceptable:
Callerهای Composableهای Stateless می‌توانند قبل از تغییر State، رویدادها را نادیده بگیرند یا تغییر دهند.

Decoupled:
State مربوط به Composableهای Stateless می‌تواند در هر جایی ذخیره شود. برای مثال، اکنون می‌توان name را به ViewModel منتقل کرد.

در مثال زیر، name و onValueChange از HelloContent خارج شده و در درخت به سمت بالا به یک Composable به نام HelloScreen منتقل می‌شوند که HelloContent را فراخوانی می‌کند.

@Composable
fun HelloScreen() {
    var name by rememberSaveable { mutableStateOf("") }

    HelloContent(name = name, onNameChange = { name = it })
}

@Composable
fun HelloContent(name: String, onNameChange: (String) -> Unit) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = "Hello, $name",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.bodyMedium
        )
        OutlinedTextField(value = name, onValueChange = onNameChange, label = { Text("Name") })
    }
}

@Parcelize
data class City(val name: String, val country: String) : Parcelable

@Composable
fun CityScreen() {
    var selectedCity = rememberSaveable {
        mutableStateOf(City("Madrid", "Spain"))
    }
}

data class City(val name: String, val country: String)

val CitySaver = run {
    val nameKey = "Name"
    val countryKey = "Country"
    mapSaver(
        save = { mapOf(nameKey to it.name, countryKey to it.country) },
        restore = { City(it[nameKey] as String, it[countryKey] as String) }
    )
}

@Composable
fun CityScreen() {
    var selectedCity = rememberSaveable(stateSaver = CitySaver) {
        mutableStateOf(City("Madrid", "Spain"))
    }
}

data class City(val name: String, val country: String)

val CitySaver = listSaver<City, Any>(
    save = { listOf(it.name, it.country) },
    restore = { City(it[0] as String, it[1] as String) }
)

@Composable
fun CityScreen() {
    var selectedCity = rememberSaveable(stateSaver = CitySaver) {
        mutableStateOf(City("Madrid", "Spain"))
    }
}

var name by remember { mutableStateOf("") }

val brush = remember {
    ShaderBrush(
        BitmapShader(
            ImageBitmap.imageResource(res, avatarRes).asAndroidBitmap(),
            Shader.TileMode.REPEAT,
            Shader.TileMode.REPEAT
        )
    )
}

@Composable
private fun BackgroundBanner(
    @DrawableRes avatarRes: Int,
    modifier: Modifier = Modifier,
    res: Resources = LocalContext.current.resources
) {
    val brush = remember(key1 = avatarRes) {
        ShaderBrush(
            BitmapShader(
                ImageBitmap.imageResource(res, avatarRes).asAndroidBitmap(),
                Shader.TileMode.REPEAT,
                Shader.TileMode.REPEAT
            )
        )
    }

    Box(
        modifier = modifier.background(brush)
    ) {
        /* ... */
    }
}

@Composable
private fun rememberMyAppState(
    windowSizeClass: WindowSizeClass
): MyAppState {
    return remember(windowSizeClass) {
        MyAppState(windowSizeClass)
    }
}

@Stable
class MyAppState(
    private val windowSizeClass: WindowSizeClass
) { /* ... */ }

var userTypedQuery by rememberSaveable(typedQuery, stateSaver = TextFieldValue.Saver) {
    mutableStateOf(
        TextFieldValue(text = typedQuery, selection = TextRange(typedQuery.length))
    )
}