@k-ramel/driver-http

HTTP driver for k-ramel

• Main repository: 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