Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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}) => (
        <button onClick={() => {show(userId)}}>load data</button>


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 = _ => {
      return (
          <button onClick={handleClick}>load data</button>

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}>
      <ApiWrapper prefix="" headers={headerObject}>
        <HelloWorld />

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(
  return (
    <div className="wrapper">
      <Record endpoint="leases" onResponse={handleLeases} />
      <p>hello {}</p>

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


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
You can’t perform that action at this time.