Declarative Reactive Record Thoughts

dec-react-record.md

Reaction Record

A declarative resource manager for react

A declaritive programming approach describes the logic of the program without describing its control flow. Its a WHAT not HOW approach.

Basic Usage

import Record from 'reaction-record'

const userId = "1219JASDL4124"

const HelloWorld = props => (

  // endpoint is the url that the api will access. lazy means you have to call the fetch function manually,
  // if not present it'll fire on componentDidMount.
  // show would post to ${url}/${id} === 'users/1219JASDL4124'
  
  <Record lazy endpoint="users">
    {({fetching, data, index, show, create, update, remove, error}) => (
      <div>
        <button onClick={() => {show(userId)}}>load data</button>
        <h1>{data.userId.name}</h1>
        <p>{data.userId.email}</p>
      </div>
    )}
  </Record>
)

//or

const postId = '12312412455'

const HelloUniverse = props => (

  // There might be some collision problems so you might not want to destructor all the args.
  
  <Record lazy endpoint="posts">
    {(postsRecord) => {
      const handleClick = _ => {
        postsRecord.show(postId)
      }
      return (
        <div>
          <button onClick={handleClick}>load data</button>
          <p>{postsRecord.data.userId.email}</p>
        </div>
      )
    }}
  </Record>
)

With API defaults

import { ApiWrapper } from 'reaction-record'

const ConnectedApp = props => (

  // this would pass prefix + headers (for auth purposes) down through context
  
  <Provider store={store}>
    <Router>
      <ApiWrapper prefix="https://www.rentalutions.com/api/v2" headers={headerObject}>
        <HelloWorld />
      </ApiWrapper>
    </Router>
  </Provider>
)

Hooked up to a state manager like Redux

const HandleStateSomewhereElse = props => {

  // Redux is better at sharing shit so we might as well let you just call a response to the index. Potentially you would
  // have another prop to define the method or whatever.
  
  const handleLeases = (err, res) => {
    err || !res.ok ? props.leasesDidNotSave() : props.saveLeases(res.data)
  }
  return (
    <div className="wrapper">
      <Record endpoint="leases" onResponse={handleLeases} />
      <p>hello {props.lease.lessor}</p>
    </div>
  )
}

export default connect(mapStateToProps, { leasesDidNotSave, saveLeases })(HandleStateSomewhereElse)

PropTypes

PropTypes	Type	Default
endpoint	string	null
lazy	boolean	false
onResponse	function	() => {}

Function Object

Key	Type	Default
fetching	boolean	false
data	object	null
index	function	() => {}
show	function	() => {}
create	function	() => {}
update	function	() => {}
remove	function	() => {}
error	object	null