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 🙏

© 2021 – Pkg Stats / Ryan Hefner

redux-saga-monitor

v0.1.8

Published

A saga middleware for redux-saga to create a saga control flow graph

Downloads

57

Readme

redux-saga-monitor

A live redux saga control flow system.

NOTE: WIP!

This is still work in progress! I'll update the main tools as well as the sister repos as I go along. So take this with a grain of salt. There is no guarantee that this tool works as you expect it to work. If you want to help or found a bug, please open up an issue or a pull request.

What this is

It's a toolset that let's you track the control flow of sagas in real time. The tracking happens in a dedicated redux store you can access to build your own graphical dev tools with it. It should be treated as a read only store, because there is no option to change the control flow.

What this is not

This repo does not provide any UI whatsoever. It's purpose is to be a base for tooling that builds on top of it.

Prior Art

This tool is mainly based on redux-saga-devtools. Sadly there is no active development, so I decided to port it over to TypeScript and develop it further.

Motivation

Sagas can get big, complicated and very confusing. Even though they are pure effect descriptors and there is nothing magic about it, the nature of middleware is that it sometimes feels like a black box. Based on the idea Dan Abramov posted here over three years ago and my recent pain with a badly designed project that uses sagas all over the place I came up with the idea of a traceable graphical UI, that shows exactly how, when and why your sagas act. The devtools already mentioned above are a step in the right direction but should be taken way further.

How it works

This tool itself is a middleware, but only reads the sagas data and stores it into it's own redux store. You then can access that store and do with the data whatever you like.

There is no React needed. Even though there is a React component exported (called SagaMonitorView), you don't have to use that. It just provides a minor abstraction, that connects your custom UI with the monitor store. But you can build your UI the way you want, since the only other thing exported is the createSagaMonitor middleware that returns a redux store. If you want to use React though, you have to add the react and react-dom packages yourself, because this package doesn't declare those as a peer dependency.

Install

npm install redux-saga-graph

or

yarn add redux-saga-graph

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducer from './store/reducers';
import rootSaga from './store/sagas';
import {createSagaMonitor, SagaMonitorView} from "redux-saga-graph";

const monitor = createSagaMonitor();
const sagaMiddleware = createSagaMiddleware({sagaMonitor: monitor});

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <div>
    <Provider store={store}>
      <div style={{margin: 10}}>
        {/* Your App */}
      </div>
    </Provider>
    <SagaMonitorView monitor={monitor}>
      {/* Your Devtool */}
    </SagaMonitorView>
  </div>,
  document.getElementById('root')
);

That's it.

Data Documentation

This is still a todo.

Check out this repo and run the example:cancellable-counter script. This dumps the monitor state to the console every time something changes.