@k-ramel/driver-http v3.0.1

@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

Actions

All emitted events have some data