@k-ramel/driver-http

HTTP driver for k-ramel

Stats

StarsIssuesVersionUpdatedCreatedSize
@k-ramel/driver-http
20393.0.12 years ago4 years agoMinified + gzip package size for @k-ramel/driver-http in KB

Readme

@k-ramel/driver-http

HTTP driver for k-ramel

Install it

yarn add @k-ramel/driver-http regeneratorRuntime

How to use it

In a reaction (See main documentation about listeners/reactions)

First you have to add it to define it to the store.

import { createStore, types } from 'k-ramel'
import http from '@k-ramel/driver-http'

const store = createStore(
  {
    data: {
      users: types.keyValue(),
    },
  },
  {
    drivers: {
      http,
    },
  },
)

Then you can use it in reactions and listeners

export const save = (action, store, drivers) => {
  const { http } = drivers
  const todo = store.data.todos.get(action.payload)

  // TODOS is the context for this request
  // You can then catch events like `/@@http\/TODOS>.*/
  http('TODOS')
    // It will
    // 1. trigger an event like `@@http/TODOS>POST>STARTED`
    // 2. serialize your todo
    // 3. add the header Content-Type to application/json
    // 4. use fetch to call your API
    // 5. trigger event like `@@http/TODOS>POST>FAILED` or `@@http/TODOS>POST>ENDED`
    .post('/api/todos', todo)
}

Context

Sometimes you need to remember why you did a request when you receive a terminal event (FAILED or ENDED):

In the previous example, if your API just returns 200 in case of success without any payload and you still want to let your user knows that the todo is actually saved (green border), then you don't know which todo to update!

In this cases you can use the context object:

export const save = (action, store, drivers) => {
  const { http } = drivers
  const todo = store.data.todos.get(action.payload)

  http('TODOS', { id: todo.id })
    .post('/api/todos', todo)
}

Then the FAILED or ENDED event will have a context field with the related todo id in it! You can use it to update your ui and give your user feedback!

// listeners.js
// ...
when('@@http/TODOS>POST>ENDED')(updateAfterSave),

// reactions.js
// ...
export const updateAfterSave = (action, store) => {
  const { context } = action
  store.data.todos.update({ id: context.id, saved: true, error: false })
}

Emitted events

event type when
@@http/MY_CONTEXT>POST>STARTED dispatched just before the fetch is started
@@http/MY_CONTEXT>POST>ENDED dispatched once the request is done without error (based on HTTP status)
@@http/MY_CONTEXT>POST>FAILED dispatched once the request is done with error (based on HTTP status)

Actions

All emitted events have some data

field description type
type event type string
fetch url and fetch options, this can be used to retry a request that is on error array ([url, options])
status HTTP status of the response number
headers HTTP response headers object (header name -> header value)
payload data of the response (if the content type is application/json, the data is already parsed) any
context your optional context added when use the driver. The context help you to recognize the FAILED or ENDED event and react with the right reaction. any

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.