Skip to content

Latest commit

 

History

History
145 lines (122 loc) · 7.81 KB

README.md

File metadata and controls

145 lines (122 loc) · 7.81 KB

k-ramel

State manager for your app components, the safe and easy way.

CircleCI Coverage Status NPM Version Greenkeeper badge

Why should you give it a try? 🤔

Because k-ramel:

  • ⚡️ is fast
  • 📸 is immutable
  • 📦 is modular
  • 💎 encourages to decouple UI and state management
  • 💥 encourages to not have side effect into your business logic
  • 👌 has a light bundle size footprint
  • 🐛 works with redux-dev-tools

Table of content

Migrating

Hey! If you come from an early version of k-ramel and want to upgrade, you can read this migration guide 💎

Modules and libs

packages description  documentation  gziped size
k-ramel core package documentation Size
@k-ramel/react ReactJS connector documentation Size
@k-ramel/driver-http fetch wrapper documentation Size
@k-ramel/driver-form minimalist form handler documentation Size
@k-ramel/driver-redux-form redux-form wrapper documentation Size
k-redux-router Redux router (one route === one code) documentation

⚠️Note that some packages have dependencies:

  • @k-ramel/driver-http: regeneratorRuntime
  • @k-ramel/driver-redux-form: regeneratorRuntime

This getting started helps you to understand how to do things like that!

const listeners = [
  // when the user clicked on "add a todo" button
  // we ask the API to add a new todo (the title is hardcoded for simplicity here)
  when('@@ui/ADD_TODO>CLICKED')((action, store, drivers) => {
    drivers.http('TODO').post(
      'https://todo-backend-modern-js.herokuapp.com/todos',
      {
        title: 'Yo! I am a new todo!',
      },
    )
  }),
  // when the API responds (not in error),
  // we add the new todo returned by the API in the store
  when('@@http/TODO>POST>ENDED')((action, store) => {
    store.todos.add(action.payload)
  }),
  // when a new todo is added to the store
  // we log a message :)
  when('@@krf/ADD>TODOS')(() => {
    console.log('A todo is added!')
  }),
]

Ecosystem

You can pick some modules based on your usage, or even write your own.
The modules that are supported by k-ramel are listed here.
We add modules when we need them but feel free to open PR if you want to add your own.

Modules can be :

  • connectors, used to connect your business logic (and your data) to your UI. We only have a ReactJS connector at the moment.
  • drivers, used to do some side effects (http, window, history, etc) or share some logic, besides your business logic.

How to use k-ramel

k-ramel is a data store that allows you to listen to event and then react to it. In a reaction you can access:

  • the outside world via drivers, this is where you put your side effects, like HTTP calls
  • your data, via store

Then if you connect an UI to k-ramel, via connectors, it can be refreshed each time the store is updated.

You can find documentation about each part of k-ramel there:

Examples

Contributors

Known users

  • sparklane - B2B Predictive lead scoring [closed source]
  • metroscope - AI diagnosis for targeted maintenance [closed source]
  • conference-hall - A call for paper project [open source]
  • k-mille - uni rakun assistant [open source]

Deprecated modules

packages description  documentation last version  why
@k-ramel/driver-redux-little-router redux-little-router wrapper documentation 1.2.0 redux-little-router is deprecated

About uni rakun

uni rakun is created by two passionate french developers.

Do you want to contact them? Go to their website

Guillaume CRESPEL Fabien JUIF