withStateTransactions function Deprecated #

The withStateTransactions is deprecated. Please use the component setState method for mutating state within a transaction.


The withStateTransactions function extends a component with transactions so multiple state changes can occur without triggering a re-render.

// import it with all other features
import { createComponent, withStateTransactions } from 'https://cdn.skypack.dev/ficusjs@3'

// alternatively, import the function directly
// import { withStateTransactions } from 'https://cdn.skypack.dev/ficusjs@3/with-state-transactions'

// import the renderer and html tagged template literal from the lit-html library
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/lit-html'

createComponent(
'my-like-component',
withStateTransactions({
renderer,
state () {
return { count: 0, message: null, status: 'unliked' }
},
like () {
// start a transaction
this.beginTransaction()

// change some state
this.state.count = this.state.count + 1
this.state.message = 'Thanks for liking this!'

// save the like to the server
window.fetch('/api/likes', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ count: this.state.count, updatedBy: 'Jane Doe' })
})
.then(res => res.json())
.then(data => {
this.state.status = 'liked'
this.endTransaction()
})
.catch(err => {
this.rollbackTransaction()
this.state.status = 'error'
})
},
render () {
if (this.state.status === 'liked') {
return html`<p>${this.state.message}</p>`
}
return html`<button type="button" @click=${this.like}>Like</button>`
}
})
)

A transaction is a sequence of operations performed on state as a single logical unit of work.
The transaction can be either all committed (applied to state) or all rolled back (undone from state).

beginTransaction method Deprecated #

The beginTransaction method starts a transaction.

endTransaction method Deprecated #

The endTransaction method ends the transaction and triggers a component render.

rollbackTransaction method Deprecated #

The rollbackTransaction method rolls back the state changes carried out within the transaction.
This is used if an error occurs, and the state needs to be reset.