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!
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.
const client =
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/blogsconst blogs = // https://example.com/api/v1/commentsconst 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 const client = // GET http://example.com/api/posts/latest//// { title: 'My latest blog post', body: 'Hello, world!' }const post = post
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' async { try const res = await thisprops // AJAX action creators are promises, so you can await on them to // handle errors or do something after they finish. console catch error // redux-supermodel will track the error state for you, but // you can also do your own thing. } // 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. thisprops { const initialized error title body fetchPost = thisprops if !initialized if error return <div ="error">errormessage</div> else return <div ="loading">Loading...</div> return <div> <h1>title</h1> <div ="body"> body </div> <div ="error"> errormessage </div> <button ="button" =>Refresh</button> </div> } { const ready error payload = const data: title body = } = payload return ready error title body } const actions = post resetPost: postreset mapProps actionsMyComponent
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.
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 const rootReducer = createStorerootReducer