OULIK

Declarative, self-documenting state-management.
Free of innacurate actions & convoluted reducers. All in-line.

🎨 WHY CHOOSE OULIK?

Oulik is designed to make your state management as transparent and semantically consistent as possible.
It's fluent API is 100% typesafe, and it uses that API to auto-generate your actions and perform immutable updates.
This library can be used with  Vanilla-JS, with minimal bindings for  React, and  Angular.

🌈 SET UP

const get = set({
  username: '',
  favorite: {
    foods: new Array<string>(),
    hobbies: new Array<{ id: number, name: string }>(),
  },
});

✍️ WRITE STATE

get(s => s.username)                     // type: 'username.replace()'
  .replace('Terence');                   // replacement: 'Terence'

get(s => s.favorite.foods)               // type: 'favorite.foods.insert()'
  .insert(['Indian', 'Sushi']);          // insertion: ['Indian', 'Sushi']

get(s => s.favorite.hobbies)             // type: 'favorite.hobbies.find().patch()'
  .find(s => s.id).eq(3)                 // query: 'id === 3',
  .patch({ name: 'coding' });            // patch: { name: 'coding' }

🔍 READ STATE

get(s => s.favorite.hobbies)
  .read()

get(s => s.favorite.hobbies)
  .onChange(e => console.log(e));

derive(
  get(s => s.foods),
  get(s => s.hobbies),
).usingExpensiveCalc(
  (foods, hobbies) => {
    // some calculation we don't want to repeat unnecessarily
  }
)

🥚 NEST STORES

class TodoComponent {
  get = setNested({
    name: '',
    description: '',
    done: false,
  });
  onClickDone(done: boolean) {
    get(s => s.done)
      .replace(done);
  }
}