Async Actions

Since actions are just plain functions, they can be async. This gives us the flexibility of implementing things like async data fetches inside actions.

Here is an example using async/await for async action:

entities/settings.js

import { entity } from 'simpler-state'
import { fetchConfig } from '../services/configService'

export const settings = entity({
  loading: false,
  config: null
})
//                          👇
export const loadConfig = async () => {
  settings.set({ loading: true, config: null })

  const res = await fetchConfig()
  settings.set({ loading: false, config: res })
}

entities/settings.ts

import { entity } from 'simpler-state'
import { fetchConfig, Config } from '../services/configService'

export interface Settings {
  loading: boolean
  config: Config
}

export const settings = entity<Settings>({
  loading: false,
  config: null
})
//                          👇
export const loadConfig = async () => {
  settings.set({ loading: true, config: null })

  const res = await fetchConfig()
  settings.set({ loading: false, config: res })
}               

Back to home | More recipes...