k-ramel

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

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
• 📦 Modules and libs
• 🎉 Getting started
• 📝 Ecosystem and documentation
• 📚 Examples
• 💜 Contributors
• 💪 Known users

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
@k-ramel/react	ReactJS connector	documentation
@k-ramel/driver-http	fetch wrapper	documentation
@k-ramel/driver-form	minimalist form handler	documentation
@k-ramel/driver-redux-form	redux-form wrapper	documentation
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

Getting started

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:

• store
• listeners
• reactions
• drivers

Examples

• Our own todo-mvc
• conference-hall from @bpetetot
• k-mille, our personal assistant @unirakun

Contributors

• Fabien JUIF [@fabienjuif]
• Guillaume CRESPEL [@guillaumecrespel]
• Benjamin PETETOT [@bpetetot]
• Valentin COCAUD [@EmrysMyrddin]
• Yvonnick FRIN [@frinyvonnick]
• Delphine MILLET [@delphinemillet]
• Benjamin PLOUZENNEC [@Okazari]
• Benjamin PLOUZENNEC [@Okazari]
• Corinne KRYCH @corinnekrych
• Arthur FAUGERAS @AFaugeras

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