Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

redux-supermodel

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-supermodel

A package of action creator functions and reducers that deal with the state management of REST-like APIs for you... all you need is a URL!

  • 0.16.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

redux-supermodel

BCH compliance Codacy Badge Build Status dependencies Status devDependencies Status

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!

Check out the demo

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')

Attaching your Resource's props to your Component

Start with your resource definition, let's pretend http://example.com/api/posts/latest will return a JSON object with properties title and body.

// resources.js

import { createClient } from 'redux-supermodel'

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

// GET http://example.com/api/posts/latest
//
// { title: 'My latest blog post', body: 'Hello, world!' }
export const post = client('post', { url: 'posts/latest' }) 

You can use the connect Higher-Order Component to attach your resource state to your component and bind any action creators you want to use. Most of the time, you will be fetching something when the component mounts. If this is the only component that will use the resource, you can reset it when the component unmounts. Usually create and update action creators will be bound to the button or submit handlers on your form.

// MyComponent.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { post } from './resources'

export class MyComponent extends Component {
  async componentDidMount() {    
    try {
      const res = await this.props.fetchPost()
      
      // AJAX action creators are promises, so you can await on them to 
      // handle errors or do something after they finish.
      console.log(res)
    } catch (error) {
      // redux-supermodel will track the error state for you, but 
      // you can also do your own thing.
      alert('Something bad happened!')
    }
  }
  
  componentWillUnmount() {
    // If you only ever access a resource within the context of a single component and
    // its children, you can reset the resource on unmount to clean up your redux state.
    this.props.resetPost()
  }

  render() {
    const { initialized, error, title, body, fetchPost } = props
    
    if (!initialized) {
      if (error) {
        return <div className="error">{error.message}</div>
      } else {
        return <div className="loading">Loading...</div> 
      }
    }

    return (
      <div>
        <h1>{title}</h1>
        <div className="body">
          {body}
        </div>

        <div className="error">
          {error.message}
        </div>

        <button type="button" onClick={fetchPost}>Refresh</button>
      </div>
    )
  }
}

export function mapProps (state) {
  const { ready, error, payload } = post(state)
  const { data: { title, body } = {} } = payload
  return { ready, error, title, body }
}

const actions = { 
  fetchPost: () => post.fetch({ id: 'latest' }),
  resetPost: post.reset,
}

export default connect(mapProps, actions)(MyComponent)

The payload can be a massive object containing lots of information about the HTTP request and response, most of which you aren't going to need when you're rendering your component, so I suggest using the mapProps call to simplify the payload to just the stuff you're going to need. Try to avoid using payload directly. Check out this blog post for further reading.

For details on mapProps, read the react-redux connect() documentation.

For the full list of options, see bindResource.

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

Keywords

FAQs

Package last updated on 06 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc