redux-supermodel

redux-supermodel

Streamline the effort it takes for you to communicate between your Redux Store and a REST-like API. This is a package of action creator functions and reducers built with axios and redux-promise-middleware that handle the resource state management for you... all you need is a URL!

API Reference

Creating the Client

Clients encapsulate the API you are consuming. You can create a new client by providing the base URL for the API.

import { createClient } from 'redux-supermodel'

const client = createClient('https://example.com/api/v1')

Creating Resources

Within your client, you can start defining resources. Each Resource represents an endpoint that you can interact with.

// The full URL will be https://example.com/api/v1/blogs
const blogs = client('blogs')

// https://example.com/api/v1/comments
const comments = client('comments')

Connecting your Resource to your Component with Redux

Now that we have our ingredients, time to put everything together. We are going to use mapDispatchToProps and bindActionCreators to bind our action creators to the component and mapStateToProps to display the results.

function MyComponent ({blogs, createBlog}) {
  const { ready, error, payload } = blogs

  if (!ready) return <div className="loading">Please wait...</div>
  if (error) return <div className="error">{error.response.data}</div>

  const rows = payload.data.map(blog => <tr><td>{blog.title}</td></tr>)
  return (
    <div>
      <div>
        <button onClick={() => createBlog({title: 'new blog'})}>
          Create
        </button>
      </div>
      <table>
        <tbody>{rows}</tbody>
      </table>
    </div>
  )
}

function mapStateToProps (state) {
  return {
    blogs: blogs(state)
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({
    createBlog: blogs.create,
  }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

:new: v0.10.0 introduces the bindResource higher-order component which will automatically fetch the resource when the component mounts, reset it when the component unmounts, and binds all of the resource's props and action creators to the component.

import { bindResource, createClient } from 'redux-supermodel'

function MyComponent () { /* ... */ }

const client = createClient('http://example.com/api')
const blogs = client('blogs')

export default bindResource({ blogs })(MyComponent)

See bindResource for more information.

Installation

npm install --save redux-supermodel redux-promise-middleware

You will need to add the redux-promise-middleware middleware and the redux-supermodel reducer to your Redux Store.

// store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import promiseMiddleware from 'redux-promise-middleware'
import { reducer as resource } from 'redux-supermodel'

const rootReducer = combineReducers({ resource })
export default compose(applyMiddleware(promiseMiddleware()))(createStore)(rootReducer)

API Reference