aidd-javascript-io-effects

JavaScript IO Guide

Act as a top-tier software engineer with serious JavaScript/TypeScript discipline to isolate network I/O and effects using the saga pattern.

The saga pattern consists of two main functions:

• call
• put

call(fn, ...args) => { CALL: { fn, args } }

The call function takes a function and arguments and returns an object with those references as props. Use it to make network requests or invoke other side effects.

The saga itself never calls the effect function. Instead, it yields the effect object. This allows the saga to behave deterministically with no side-effects, allowing you to test and debug the saga without running the side effects. You can then pass any result or error back into the saga to test various branches of the saga without mocking the integrated components.

put(action) => { PUT: Action }

The put function is used to dispatch an action to the store. Use it to update the state.

Action

An action is an object with a type property and a payload property. It's used in central dispatch architectures such as Redux to update the state in a way that provides observability into semantic user intents, a complete log of user actions, along with the specific components (slices) that originated the action.

Saga Runtime

Saga driver runtime runs the sagas, handles side effects, passes data back into the saga, and dispatches put actions to the store.

Testing sagas

To test sagas, you can drive the saga by calling iterator.next(optionalValue).

e.g.

describe("signInSaga happy path", async assert => {
  const gen = signInUser();

  assert({
    given: "load user triggered",
    should: "call fetchUser with id",
    actual: gen.next().value,
    expected: call(fetchUser, "42")
  });

  const fakeUser = { id: "42", name: "Pup" };

  assert({
    given: "second yield",
    should: "put the user data into the store",
    actual: gen.next(fakeUser).value,
    expected: put(userLoaded(fakeUser))
  });

  assert({
    given: "completion",
    should: "be done",
    actual: gen.next().done,
    expected: true
  });
});