A simple store for state management using [deepSignals](https://github.com/luisherranz/deepsignal). Can be used in react. When providing a `dataApi` implentation you can automatically sync stata to for example firebase [(example)](https://github.com/Marce
npm install react-signal-storeA simple store for state management using deepSignals.
Can be used in react.
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.
import "@preact/signals-react/auto" in main.(js/ts);``typescript`
// creates a new store
const store = new Store
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
export const $state = computed(() => store.signal).value;
`
Create an action that implements StoreAction
`typescript`
export class LoadAction implements StoreAction
type = 'LOAD';
async execute(ctx: StateContext
if (ctx.getState().users.length === 0) {
ctx.patchState({ loading: true });
const users = (await axios.get
return ctx.patchState({ loading: false, users });
}
}
}
Store:
- constructor: (initialState: T = The initial state, devTools: boolean (connect to redux devTools), dataApi? =addCallback: (callback: (action: ActionType
- 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
- : dispatches an action and return a promise with the new statecurrentState
- : returns the current state.asObservable
- : return an observable of T
ctx: StateContext
- getContext: gets the context that is added while creating the store. E.g. use to access History \*dispatch: (action: StoreAction
- : dispatches an action and return a promise with the new stategetState
- : 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.
- (action: ActionTypesyncOptions
- 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; 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