app()

This is the entry point to your application. An application can be describe in three pieces, init, subscribe, and observe. Init is a required tuple of your initial data in the form of [initialState, initialEffect]. Subscribe is an optional function with the signature (state) => [sub1, sub2, ...]. Observe is an optional function with the signature ([currentState, currentEffect], action) => {} and is used for debugging. These pieces all exist inside an object, and all together, they may look something like this:

example.js
import { app, effects } from 'ferp';
​
​
​
const initialState = 1;
​
const Add = state => [state + 1, effects.none()];
​
const addSubcription = (dispatch, intervalInMs) => {
  const handle = setInterval(dispatch, intervalInMs, effects.act(Add));
  
  return () => {
    clearInterval(handle);
  };
};
​
const dispatch = app({
  init: [
    initialState,
    effects.none(),
  ],
​
  subscribe: (state) => [
    state < 10 && [addSubscription, 1000],
  ],
});

Don't worry if this looks scary, this guide will step you through each piece, and explain how they work.

Your call to app will also return a copy of dispatch. This is meant to be an escape hatch, but in all likelihood, you will never need it. If you're not sure if you need it, check out the What is a Ferp Subscription? which covers 99% of the cases when you think you may need the app global dispatch method. The last 1% is probably for end-to-end testing of your application

effects {}

Ferp, inspired by the likes of Elm's Cmd, exports a set of core effects that can be combined and composed to build powerful pieces of logic. Getting comfortable and familiar with these effects will enable you to use Ferp effectively.

Effects are a way to encapsulate code that affects out-of-app state. These are things like getting the system time, requesting permissions, accessing the file system, or handling user interaction.

There are a set of core effects that Ferp exposes as the effects object:

import { effects } from 'ferp';
​
console.log(effects);
/*
{ none: [Function: none],
  batch: [Function: p],
  defer: [Function: q],
  thunk: [Function: r],
  act: [Function: s] }
*/

There are some other effects in that object, but we're not going to dive into those as much right here. Check out the core effects documentation for more information!