React Acey is the official React binding for Acey.
It lets your React components read data from your Models and Collections
yarn add react-acey
import React from 'react'
import { useAcey } from 'react-acey'
import Counter from './counter-model'
const CounterApp = () => {
useAcey([ Counter ])
return (
<>
<button onClick={Counter.decrement}>decrement</button>
<span>{Counter.get()}</span>
<button onClick={Counter.increment}>increment</button>
</>
)
}
export default CounterApp
import React from 'react'
import { connect } from 'react-acey'
import Counter from './counter-model'
class CounterApp extends React.Component {
render = () => {
return (
<>
<button onClick={Counter.decrement}>decrement</button>
<span>{Counter.get()}</span>
<button onClick={Counter.increment}>increment</button>
</>
)
}
}
export default connect([ Counter ])(CounterApp)
The connect()
function connects a React class component to a list of Model, Collection or Model/Collection's methods
.
It provides its connected component with the list of Model, Collection or Model/Collection's methods
it needs.
It does not modify the component class passed to it; instead, it returns a new, connected component class that wraps the component you passed in.
connect()
accepts one parameter: a list of that can contain either : Models
, Collections
or Model/Collection's methods
connect( (Function | Model | Collection)[] )
The return of connect()
is a wrapper function that takes your component and returns a wrapper component.
Same than connect()
, but for Functional Components