Skip to content

Instantly share code, notes, and snippets.

@pkrawc
Last active May 9, 2017 00:38
Show Gist options
  • Save pkrawc/2e0ed0858cd1ace7c3a624074aa4f12d to your computer and use it in GitHub Desktop.
Save pkrawc/2e0ed0858cd1ace7c3a624074aa4f12d to your computer and use it in GitHub Desktop.
Declarative Reactive Record Thoughts

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment