npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rx-firebase-store

v1.2.2

Published

This package is deprecated. rx-basic-store can be used with a firebase dataApi. An example can be found [here](https://github.com/Marcelh1983/rx-basic-store/blob/main/packages/example/src/app/api-examples/firebase-api.ts)

Downloads

85

Readme

=== deprecated ===

This package is deprecated. rx-basic-store can be used with a firebase dataApi. An example can be found here

rx-firebase-store

Auto store state using a simple reactive store with state management using RxJs. Can be used in React but will also work with other frameworks.

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

Inspired by this blog and the names of the events are inspired by ngxs

Examples

Here a demo and the code

init

To init firebase (you can use the store without firebase for e.g. storybook or unittests in that case you don't have to initFirebase).

  const initStore = (options: FirebaseOptions, region?: Region, syncOptions?: SyncOptions)
  • options: FirebaseOptions
  • region: used to configure the region of the functions
  • syncOptions: if logOptions are not null, all actions are logged to firebase.
    • collectionName: the collection where actions are logged. can be a string or function. A function can be useful wehn actions where userId is part of the collection name and userId is not set before the store is initialized.
    • addUserId: if true; added uuid of the user in the createdBy field.
    • logAction?: boolean; (default: true). If all actions are logged; it can be disabled for a single store.

example

  initStore(environment.firebase, 'europe-west1', {
    collectionName,
    addUserId: true,
  });

To log all actions to firebase use the logOptions.

create

// creates a new store
const store = createStore<ActivityStateModel>(initialState, !environment.production);

In reactJs the store can be mapped to the component state like this:

export function MyComponent() {
  const [state, setState] = useState(store.currentState());

  useEffect(() => {
    const subs = store.subscribe(setState);
    store.dispatch(new LoadAction());
    return subs.unsubscribe;
  }, []);

actions

Create an action that implements StoreAction<T, M>

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

API

Store:

  • constructor: (initialState: T = The initial state, devTools: boolean = connect to redux devTools)
  • addCallback: (callback: (action: ActionType<T, unknown>, oldState: T, newState: T, context: Map<string, unknown>) => 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<T, unknown>) => Promise: dispatches an action and return a promise with the new state
  • currentState: returns the current state.
  • asObservable: return an observable of T
  • overrideSyncOptions = (newSyncOptions: Partial): can be used to change sync options after it is created

ctx: StateContext

  • getContext(name: string): gets the context that is added while creating the store. E.g. use to access History *

  • dispatch: (action: StoreAction<Partial, unknown>) => 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.

  • Firebase functions:

    • functions: Functions
    • firestore: Firestore;
    • storage: FirebaseStorage;
    • auth: Auth;
  • To use getContext() you have to set the dependency somewhere where it is available:
  setStoreContext([
    { name: 'history', dependency: useHistory() }
  ])

In the action you can use:

  const history = ctx.getContext<History>('history');