Loaders
stapp-loaders module offers an opinionated approach to "isLoading" problem. It exposes a "loaders" state, a couple of event creators, and an isLoadingSelector creator.
Installation
npm install stapp-loaders stapp reselect
# OR using stapp-cli-tools
stapp install stapp-loaders
Peer dependencies
- stapp: >= 2.6
- reselect: >= 4
Definition
type loaders = () => Module<{}, { loaders: { [K: string]: boolean } }>
Usage
loaderStart and loaderEnd event creators are not exposed to an application API. They should be imported and used by your modules.
// myModule.js
import { mapTo } from 'rxjs/operators'
import { createEffect } from 'stapp'
import { loaderStart, loaderEnd, LOADERS } from 'stapp-loaders'
const loadData = createEffect('Load data', () => /* some async process */)
export const myModule = {
name: 'my module',
api: {
loadData
},
epic: [
loadData.start.epic(start$ => start$.pipe(mapTo(loaderStart('loadData')))),
loadData.success.epic(start$ => start$.pipe(mapTo(loaderEnd('loadData')))),
loadData.fail.epic(start$ => start$.pipe(mapTo(loaderEnd('loadData'))))
],
dependencies: [LOADERS] // this is not neccesary but is recommended, so that you won't forget to use loaders module in your app.
}
// app.js
import { loaders, isLoadingSelector } from 'stapp-loaders'
import { myModule } from './myModule.js'
const app = createApp({
name: 'my app',
modules: [
loaders(),
myModule
]
})
const isLoading = isLoadingSelector() // selectors should be created individually for every app
app.subscribe(console.loog)
// { loaders: {} }
app.api.loadData()
// { loaders: { loadData: true } }
isLoading(app.getState()) // true
// A bit later, after an async process have finished
// { loaders: { loadData: false }}
isLoading(app.getState()) // false