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

@wordpress/redux-routine

v5.11.0

Published

Redux middleware for generator coroutines.

Downloads

384,778

Readme

@wordpress/redux-routine

Redux middleware for generator coroutines.

Installation

Install Node if you do not already have it available.

Install the module to your project using npm:

npm install @wordpress/redux-routine

@wordpress/redux-routine leverages both Promises and Generators, two modern features of the JavaScript language. If you need to support older browsers (Internet Explorer 11 or earlier), you will need to provide your own polyfills.

Usage

The default export of @wordpress/redux-routine is a function which, given an object of control handlers, returns a Redux middleware function.

For example, consider a common case where we need to issue a network request. We can define the network request as a control handler when creating our middleware.

import { combineReducers, createStore, applyMiddleware } from 'redux';
import createMiddleware from '@wordpress/redux-routine';

const middleware = createMiddleware( {
	async FETCH_JSON( action ) {
		const response = await window.fetch( action.url );
		return response.json();
	},
} );

function temperature( state = null, action ) {
	switch ( action.type ) {
		case 'SET_TEMPERATURE':
			return action.temperature;
	}

	return state;
}

const reducer = combineReducers( { temperature } );

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

function* retrieveTemperature() {
	const result = yield { type: 'FETCH_JSON', url: 'https://' };
	return { type: 'SET_TEMPERATURE', temperature: result.value };
}

store.dispatch( retrieveTemperature() );

In this example, when we dispatch retrieveTemperature, it will trigger the control handler to take effect, issuing the network request and assigning the result into the result variable. Only once the request has completed does the action creator procede to return the SET_TEMPERATURE action type.

API

default

Creates a Redux middleware, given an object of controls where each key is an action type for which to act upon, the value a function which returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued.

Parameters

  • controls Record<string, (value: import('redux').AnyAction) => Promise<boolean> | boolean>: Object of control handlers.

Returns

  • import('redux').Middleware: Co-routine runtime

Motivation

@wordpress/redux-routine shares many of the same motivations as other similar generator-based Redux side effects solutions, including redux-saga. Where it differs is in being less opinionated by virtue of its minimalism. It includes no default controls, offers no tooling around splitting logic flows, and does not include any error handling out of the box. This is intended in promoting approachability to developers who seek to bring asynchronous or conditional continuation flows to their applications without a steep learning curve.

The primary motivations include, among others:

  • Testability: Since an action creator yields plain action objects, the behavior of their resolution can be easily substituted in tests.
  • Controlled flexibility: Control flows can be implemented without sacrificing the expressiveness and intentionality of an action type. Other solutions like thunks or promises promote ultimate flexibility, but at the expense of maintainability manifested through deep coupling between action types and incidental implementation.
  • A common domain language for expressing data flows: Since controls are centrally defined, it requires the conscious decision on the part of a development team to decide when and how new control handlers are added.

Testing

Since your action creators will return an iterable generator of plain action objects, they are trivial to test.

Consider again our above example:

function* retrieveTemperature() {
	const result = yield { type: 'FETCH_JSON', url: 'https://' };
	return { type: 'SET_TEMPERATURE', temperature: result.value };
}

A test case (using Node's assert built-in module) may be written as:

import { deepEqual } from 'assert';

const action = retrieveTemperature();

deepEqual( action.next().value, {
	type: 'FETCH_JSON',
	url: 'https://',
} );

const jsonResult = { value: 10 };
deepEqual( action.next( jsonResult ).value, {
	type: 'SET_TEMPERATURE',
	temperature: 10,
} );

If your action creator does not assign the yielded result into a variable, you can also use Array.from to create an array from the result of the action creator.

Contributing to this package

This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project's main contributor guide.