@fleur/fleur

🌼 @fleur/fleur 🌼

An Fully-typed Flux framework inspired by Fluxible. Runs on Node / Web.

(No dependence to React. see this if you want to use with React.)

Feature

• Fully typed. Friendly to type inference.
• Comfortable to write code
• Default async operations (side effector) support
• immer.js builtin Store
• Support Redux DevTools

Example

// actions.ts (Action typings)
import { actions, action } from '@fleur/fleur'

export const CounterActions = actions('Counter', {
    increase: action<{ amount: number }>(),
    decrease: action<{ amount: number }>(),
}

// store.ts (Store)
import { reducerStore } from '@fleur/fleur'
import { CounterActions } from './actions.ts'

interface State {
  count: number
}

export const CounterStore = reducerStore<State>('CounterStore', () => ({
  count: 0
}))
  .listen(CounterActions.increase, (draft, payload) => {
    // immutable changing state with `immer.js`
    draft.count += payload.amount
  })
  .listen(CounterActions.decrease, (draft, payload) => {
    draft.count -= payload.amount
  })
}

// operations.ts (Action Creator)
import { operations } from '@fleur/fleur'
import { CounterActions } from './actions.ts'

export const CounterOps = operations({
  increase(ctx, amount: number) {
    ctx.dispatch(CounterActions.increase, { amount })
  },
  decrease(ctx, amount: number) {
    ctx.dispatch(CounterActions.decrease, { amount })
  },
})

// selectors.ts

import { selector } from '@fleur/fleur'
import { CounterStore } from './store.ts'

export const selectCount = selector(getState => getState(CounterStore).count)

// app.ts
import Fleur, { withReduxDevTools } from '@fleur/fleur'
import { CounterStore } from './store.ts'
import { CounterOps } from './operations.ts'
import { selectCount } from './selectors.ts'

const app = new Fleur({
  stores: [CounterStore],
})
;(async () => {
  const ctx = app.createContext()

  // Enable redux-devtools if you want
  withReduxDevTools(ctx)

  await ctx.executeOperation(CounterOps.increase, 10)
  console.log(selectCount(ctx.getStore)) // => 10

  await ctx.executeOperation(CounterOps.decrease, 20)
  console.log(selectCount(ctx.getStore)) // => -10
})()

How to use with React?

See @fleur/react.