Comments (4)
jonekdahl
commented on May 27, 2024
1
Thanks @heytherewill , I think I get what you're saying.
Closing this issue, since Wills suggestion seems to be working.
from komposable-architecture.
heytherewill
commented on May 27, 2024
Hey there!
My personal predilection would be to store.state.collectAsState(initial = State()) and then use the bits of state in a completely imperative way, leaving it up for Compose to figure out when the recomposition should happen.
In an ideal scenario you'd isolate your Composables so that each only take the smallest bit of state they need to render. That would make it easier for you to understand what dependencies cause the recomposition of what :)
from komposable-architecture.
jonekdahl
commented on May 27, 2024
Hi @heytherewill,
Thanks for trying to help, I really appreciate it! I tried to apply your suggestion to the EditState, just wanted to make sure that this is what you are proposing? I'm a bit concerned about initializing global state such as the backStack at this level.
--- a/todo-sample/src/main/java/com/toggl/komposable/sample/todo/edit/EditPage.kt
+++ b/todo-sample/src/main/java/com/toggl/komposable/sample/todo/edit/EditPage.kt
@@ -11,17 +11,18 @@ import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.toggl.komposable.sample.todo.data.EditableTodoItem
-import kotlinx.coroutines.flow.map
@Composable
fun EditPage() {
val store = hiltViewModel<EditStoreViewModel>()
- val editableTodoItem = store.state.map { it.editableTodo }.collectAsState(initial = EditableTodoItem())
+ val state = store.state.collectAsState(initial = EditState(editableTodo = EditableTodoItem(), backStack = emptyList()))
+ val editableTodoItem = state.value.editableTodo
Column(
modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp).fillMaxSize(),
) {
@@ -33,7 +34,7 @@ fun EditPage() {
TextField(
modifier = Modifier.fillMaxWidth(),
label = { Text("Title") },
@Composable
fun EditPage() {
val store = hiltViewModel<EditStoreViewModel>()
- val editableTodoItem = store.state.map { it.editableTodo }.collectAsState(initial = EditableTodoItem())
+ val state = store.state.collectAsState(initial = EditState(editableTodo = EditableTodoItem(), backStack = emptyList()))
+ val editableTodoItem = state.value.editableTodo
Column(
modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp).fillMaxSize(),
) {
@@ -33,7 +34,7 @@ fun EditPage() {
TextField(
modifier = Modifier.fillMaxWidth(),
label = { Text("Title") },
- value = editableTodoItem.value.title,
+ value = editableTodoItem.title,
onValueChange = { store.dispatch(EditAction.TitleChanged(it)) },
singleLine = true
)
@@ -41,7 +42,7 @@ fun EditPage() {
TextField(
modifier = Modifier.fillMaxWidth().fillMaxHeight(0.5f),
label = { Text("Description") },
- value = editableTodoItem.value.description,
+ value = editableTodoItem.description,
onValueChange = { store.dispatch(EditAction.DescriptionChanged(it)) },
maxLines = 20
)from komposable-architecture.
heytherewill
commented on May 27, 2024
The gist is that you are not really initializing global state: The parameter you supply there is merely for the Kotlin compiler to satisfy the constraint of having some initial state. The compiler can't assert that because Flows might not have emitted by that time. Given that the library enforces the initial state is always available in the state flow, the parameter passed to collectAsState won't ever be needed.
from komposable-architecture.
Related Issues (20)
- Convert Groovy gradle files to Kotlin
- Use gradle dependency catalog
- Make the `Store` expose a `StateFlow` instead of a `Flow` HOT 2
- Disable Jetifier
- Return merged effect from reducers rather than a list of effects HOT 4
- Introduce DebugReducer for build-in high quality logs
- Add ForEach composition method
- 💚 Introduce TestStore and make effects easier to test HOT 1
- Move away from Mutable<T> and return State + Effect(s) instead
- Add tests for ReducerExtension methods
- 🔥 Get rid of the current complex TODO sample app
- Code generation proposal HOT 6
- 🆙 Effects 1.0.0
- Create Todos sample app
- Create CaseStudies sample code
- Implement debounce effect modifier
- Kotlin Multiplatform HOT 8
- Broken link on README for TODO sample app
- Unable to un-complete todo in Todos Sample
- Test library doesn't provide latest changes
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from komposable-architecture.