Preact bindings for Amnis
Assuming you use npm as your package manager:
npm install --save amnis-preact
If you want to experiment and play around with amnis-preact
without a module bundler or you don't use one - that's OK.
This package includes precompiled production and development UMD builds.
You can just drop a UMD build as a <script>
tag on a page. The UMD builds make amnisPreact
available as a window.amnisPreact
.
<script type="application/javascript" src="https://unpkg.com/amnis-preact"></script>
You can see a basic example in this jsFiddle.
The API has two parts: Provider
to put amnis
' store on the context
and connect
higher-order component (HOC) to hook up your preact
components with data and actions.
Wrap your root component in a Provider
to put amnis' store
on the context.
import Preact, {h} from 'preact'
import {createStore} from 'amnis'
import {Provider} from 'amnis-preact'
import {Root} from './root'
import {rootReducer} from './reducers'
const store = createStore(rootReducer)
Preact.render((
<Provider store={store}>
<Root />
</Provider>
), document.getElementById('root'))
connect
is a simple HOC that is used to hook up your preact
components with some data from amnis' store and automatically re-render them when that data changes. It is also used to provide event-handlers.
It take only 2 functions:
import {h} from 'preact'
import {connect} from 'amnis-preact'
const CounterApp = ({count, onPlus, onMinus}) =>
<div>
<h1>{count}</h1>
<button onClick={onPlus}>+</button>
<button onClick={onMinus}>-</button>
</div>
const mapStateToProps = state => ({
count: state.count
})
const mapDispatchToProps = dispatch => ({
onPlus: () => dispatch({type: 'INCREMENT'}),
onMinus: () => dispatch({type: 'DECREMENT'}),
})
export default connect(mapStateToProps, mapDispatchToProps)(CounterApp)
MIT