app()

This is the entry point to your application. An application can be describe in three pieces, init, update, and subscribe. Init is a required tuple of your initial data in the form of [initialState, initialEffect]. Update is a required function with the signature (message, previousState) => [nextState, nextEffect]. Subscribe is an optional function with the signature (state) => [sub1, sub2, ...]. These pieces all exist inside an object, and all together, they may look something like this:

example.js
import { app, effects } from 'ferp';
​
const messages = {
  add: 'add',
};
​
const initialState = 1;
​
const addSubcription = (intervalInMs) => (dispatch) => {
  const handle = setInterval(() => dispatch(messages.add), intervalInMs);
  
  return () => {
    clearInterval(handle);
  };
};
​
app({
  init: [
    initialState,
    effects.none(),
  ],
  
  update: (message, previousState) => {
    if (message === messages.add) {
      return [
        initialState + 1,
        effects.none(),
      ];
    }
    
    return [
      previousState,
      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.

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] }
*/

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!

util {}

The util object has some helpful and common utility functions to tackle common issues you may run into. Here's what that object looks like:

import { util } from 'ferp';
​
console.log(util);
/*
{ combineReducers: [Function: combineReducers],
  pure: [Function: x] }
*/

util.combineReducers()

Ferp pays tribute to some of the great libraries both before, and surely after itself. The update loop uses a message and the previous state to build a new state, which lends itself well to the reducer pattern. Ferp has a bit of a unique problem, being that updates don't just return state, but side-effects as well. This creates a tuple data of [state, effect]. At the root level, this is fine, but if you have a set of nested reducers, your state may have many effects unintentionally nested in it. Check out the handy reducer patterns section for more details.