Debugging the app

Creating both unit tests and integration tests with Kiss is very easy. If you create a lot of tests, this helps you to avoid bugs in the first place, and you'll probably spend very little time debugging your app.

However, if you still need to manually debug your app from time to time, here are some tips:

Viewing the state

At any moment, you can print the current store state to the console, from inside any component:

const state = useAllState<State>();
console.log(state);

Or from inside actions:

console.log(this.state);

Or from inside tests:

const store = new Store<State>({ initialState: new State() });
...

console.log(store.state);

Checking actions in progress

Printing the list of actions in progress to the console can be useful for debugging,

The store method actionsInProgress() returns a Set with the actions that are currently in progress. This set is a copy, so it doesn't change when actions are later dispatched or finish.

From inside any component, useStore() doesn't have this method, but you can get the Store object from its store property:

const { store } = useStore();
console.log(store.actionsInProgress());

Or from inside actions:

console.log(this.store.actionsInProgress());

Or from inside tests:

const store = new Store<State>({ initialState: new State() });
...

console.log(store.actionsInProgress());

State changes

Function Store.describeStateChange(obj1, obj2) returns a string describing only the differences between two given objects.

If you take a snapshot of the store's state in different moments,
you can use this function to print the differences between them to the console. For example:

const store = new Store<State>({ initialState: new State() });

let state1 = store.state;
await store.dispatchAndWait(new MyAction());
let state2 = store.state;

console.log(Store.describeStateChange(state1, state2));

Logging state changes to the console

By default, Kiss will use Store.log() to print all state changes to the console, as this may be useful for development, testing and debugging.

Be sure to use logStateChanges: false in the store constructor, to turn it off in production, as leaving this on may slow down your application:

// In production
const store = new Store<State>({
  initialState: new State(),
  logStateChanges: false,
});

Dispatch count

Each time an action is dispatched, Kiss increments an internal counter. This counter can be retrieved from store.dispatchCount. This number may sometimes be useful for logging and debugging.