mill
0.1.0indexedFacilitates easy management of UI states for developers by providing components like ViewStateStore, Reducer, and built-in navigation. Implements concepts similar to Redux.
2
Stars
—
Used by
dependents
—
Health
/ 100
Mill
Mill is a tool for compose multiplatform developers to easily manage the UI states.
Setup
Adding Dependency
Before using mill, adding the dependency is needed
kotlin {
sourceSets {
val commonMain by getting {
dependencies {
implementation("io.github.zegjoker:mill-core:$version")
implementation("io.github.zegjoker:mill-router:$version")
}
}
}
}
If you only want to use the part for UI state management, you can only core to the dependencies block
kotlin {
sourceSets {
val commonMain by getting {
dependencies {
implementation("io.github.zegjoker:mill-core:$version")
}
}
}
}
Overview
If you are a fullstack developer, this will be easiest part for you because mill uses the almost the same strategy as Redux. If you are new to Redux or mill, don't worry, the following guide will teach you steps by steps. There are 5 important elements/components in mill:
- ViewStateStore: The place to store the UI states, provide an interface to pass the UI actions to the reducer, also provide an effect subscription
- Reducer: This is the place you can put the core logic in, it will process the pass-in UI action with the current state and produce a new state to store
- ViewState: Represents the UI state that UI view will show different element accordingly.
- Action: Any actions that comes from UI view, like click, input
- Effect: The stuff which are not related to UI state, such as navigation event, dialog pops
Usage
UI State Management
- Provides the
ViewStateStoreSaverat the root composable
// Android
CompositionLocalProvider(
LocalViewStateStoreSaver provides ViewStateStoreSaver(viewModelStore) // viewModelStore comes from activity
) {
content() // Your UI content
}
// Other platforms
CompositionLocalProvider(LocalViewStateStoreSaver.provides(ViewStateStoreSaver())) {
content() // Your UI content
}
- Name
- Reducer
- function to initiate the state
val store = rememberStore(
name = "counter-store",
counterReducer,
) { 0 }
- Subscribe the state in UI composable
val state by store.state.collectAsState()
Then you can use the state to show the UI.
Column(
modifier = modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text("Count: $state")
Spacer(modifier = Modifier.height(8.dp))
Button(onClick = {
store.dispatch(Unit)
}) {
Text(" + 1 ")
}
}
Navigation
Mill has a built-in navigation component named router, it is pretty much the same as android's navigation compose. To use it:
- Create a route controller
val controller = rememberRouteControler()
- Create the route graph with
RouteHost
RouteHost(
controller = controller,
modifier = Modifier.fillMaxSize(),
startRoute = "start"
) {
route(path ="start") {
StartScreen(onNav = {
controller.navigateTo("second/12")
})
}
route(
path = "second/{param}",
params = listOf(
RouteParam("param", type = RouteParamType.Int)
)
) {
val param = LocalRouteContext.current.getIntParam("param") ?: 0
SecondScreen(param = param, onBack = {
controller.navigateUp()
})
}
}
License
Copyright 2023 ZegJoker.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.