signals-store

A simple store for state management using deepSignals.
Can be used in all frameworks that support Signals
When providing a ``dataApi` implentation you can automatically sync stata to for example firebase (example) or localStorage (example).

Created to seperate state management from the UI components without a lot of boilerplate code.

Examples

Here a demo and the code

$3

`typescript
// creates a new store
const store = new Store(initialState, !environment.production);
`
In reactJs you can add the store in a `useRef` if you use the store in a single component or an `useContext` when using it is multiple components. The store can be mapped to the component state like this:

#### use

` typescript
import { Signal, computed } from '@preact/signals-react';
import { StateModel, initialState } from './store';
import { Store } from 'signals-store';

export const store = new Store({ ...initialState });
export const $state = computed(() => store.signal).value;

`

$3

Create an action that implements StoreAction

`typescript
export class LoadAction implements StoreAction {
type = "LOAD";
async execute(ctx: StateContext): Promise {
if (ctx.getState().users.length === 0) {
ctx.patchState({ loading: true });
const users = (await axios.get('https://randomuser.me/api/?results=20')).data.results;
return ctx.patchState({ loading: false, users });
}
}
}
`


$3

Store:
- `constructor: (initialState: T = The initial state, devTools: boolean (connect to redux devTools), dataApi?` =
- `addCallback: (callback: (action: ActionType, oldState: T, newState: T, context: Map) => void) => void` can be to add a callback function that captures all actions. For example to log all actions to the console or database.
- `dispatch: (action: StoreAction) => Promise`: dispatches an action and return a promise with the new state
- `currentState`: returns the current state.
- `asObservable`: return an observable of T

ctx: StateContext
- `getContext(name: string)`: gets the context that is added while creating the store. E.g. use to access History *
- `dispatch: (action: StoreAction) => Promise`: dispatches an action and return a promise with the new state
- `getState`: gets the current state.
- `setState`: set the entire new state.
- `patchState`: set only the changed properties of the state, these will be merged with the current state.
- `dataApi`: the data api that is passed. Can be casted to the used implementation.
- `storeAction: default: true, if a specific action should not be logged it can be overridden by setting this property to false
- `storeState: default: true, if a specific action should not result in a stored state it can be overridden by setting this property to false

dataApi: Optionally you can pass a dataApi implementation to automatically store the state. Examples can be found here.
- `syncOptions`
- `state`: state can be stored automatically:
- `sync: boolean`: indicates if the state has to be stored
- `collectionName`: name of the collection or table where the data will be stored. (default: state)
- `addUserId`: add a createdBy field in the state
- `excludedFields`: exclude fields from the state that you don't want to store in the database.
- `action`: all actions including payload can be stored too e.g. to analyse the use of your application.
- `sync`: indicates if actions should ben stored
- `collectionName`: name of the collection or table where the data will be stored. (default: actions)
- `addUserId`: add a createdBy field in the action
- `excludedFields`: exclude fields from the action payload that you don't want to store in the database.
- `getUserId: () => string`: get the userId of the logged in user.
- `getState: () => Promise`: returns the stored state
- `setState: (doc: T) => Promise`: stores the state
- `storeAction

(action: ActionType): void`; stores an action

* To use getContext() you have to set the dependency somewhere where it is available:

`typescript
setStoreContext([
{ name: 'api', dependency: new Api() }
])
`

In the action you can use:

`typescript
const api = ctx.getContext('api');
``