Do you need to access the stages of your thunks in easy-peasy? If yes, you are in the right place.
easy-peasy-thunk-stages
allows you to augment your states adding the stage of all your thunks.
There are 2 ways of using this library:
- Using the model
thunkStagesModel
. If you need to store stages for all thunk in a model. - Using the hook
useThunkStage
. If you want to wrap an existing thunk using a hook that will give you the correspondin stage.
About the hook: it doesn't persist the stage of the wrapped thunk in the store. It is just an experiment. This may change or it may live in a separate module.
npm i easy-peasy-thunk-stages
Given the following UsersModel
containing 4 thunks.
interface UsersModel {
fetch: Thunk<UsersModel>
createUser: Thunk<UsersModel, User>
updateUser: Thunk<UsersModel, User>
removeUser: Thunk<UsersModel, User>
}
const userModel {
fetch: thunk(...),
createUser: thunk(...),
updateUser: thunk(...),
removeUser: thunk(...),
}
And your app need to known when any thunk is idle
, busy
, completed
or failed
.
With easy-peasy-thunk-stages
you can have that information about your thunks' stages by doing 3 simple changes:
// 1️⃣ Extends the interface.
// 👇
interface UsersModel extends ThunkStagesModel<UsersModel> {
fetch: Thunk<UsersModel>
create: Thunk<UsersModel, User>
update: Thunk<UsersModel, User>
remove: Thunk<UsersModel, User>
}
const userModel {
...thunkStagesModel({ // 👈 2️⃣ Add the implementation.
fetch: 'idle',
create: 'idle', // 👈 3️⃣ Initialize each thunk with a stage.
update: 'idle',
remove: 'idle',
}),
fetch: thunk(...),
create: thunk(...),
update: thunk(...),
remove: thunk(...),
}
That's it! Now, you can access your thunk stages as follows:
const UsersPage = () => {
const thunkStages = useStoreState($ => $.users.thunkStages)
useEffect(() => {
if (thunkStages.fetch === 'idle') {
fetch()
}
}, [])
if (thunkStages.fetch === 'busy') {
return 'Loading...'
}
if (thunkStages.fetch === 'failed') {
return 'Could not load users...'
}
return <UsersList users={users}>
}
import { useThunkStage } from 'easy-peasy-thunk-stages'
const UsersPage = () => {
const fetchUsers = useStoreState($ => $.users.fetchUsers)
const [fetch, fetchStage] = useThunkStage(fetchUsers)
useEffect(() => {
if (fetchStage === 'idle') {
fetch()
}
}, [])
if (fetchStage === 'busy') {
return 'Loading...'
}
if (fetchStage === 'failed') {
return 'Could not load users...'
}
return <UsersList users={users}>
}
Adding thunkStagesModel()
will augment your model with the following properties: thunkStages
, setThunkStage
and setThunkStageOn
.
As a consumer your app will be interacting with thunkStages
. While the other two props are used by thunkStagesModel()
to listen to all thunk and updates their stages.
- Clone this repository.
- Install dependencies:
npm i
. - Run it locally:
npm start
or./src/bin.js
npm run test
Releases are triggered by npm version
and handled by GitHub Actions.
Made with ♥ by @rmariuzzo