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

reduxless

v3.0.3

Published

> A small and performant state management and routing library with unidirectional data flow.

Downloads

8

Readme

Reduxless

A small and performant state management and routing library with unidirectional data flow.

npm version Build Status Coverage Status gzip size

Looking for the API? Click here

Introduction

Reduxless simplifies some of the complexity of Redux and reduces the amount of necessary boilerplate code. It is also much more performant and scales linearly as the application's state grows (see perfomance analysis).

Reduxless combines the roles of reducers and actions into one operation: the two key operations are actions and selectors. We lose the ability to perform time travelling on our state, but the advantages of simpler and faster code can outweigh that benefit.

Installation

To install the stable version:

npm install --save reduxless

Importing

Reduxless can be used with any React-like library.

To include it in a Preact project:

  import reduxless from 'reduxless/preact'

And for a React based projects:

  import reduxless from 'reduxless/react'

Alternatively if you are using a library other than React or Preact, for example, inferno, you can inject the module into Reduxless like so:

import createReduxless from "reduxless";

const reduxless = createReduxless(require("inferno"));

The general gist

The following snippet of code demonstrates how reduxless can be used with a React-like library -- in this case Preact:

import { h, render } from 'preact';
import { createStore, Container, mapper } from 'reduxless/preact';

const store = createStore({ name: 'Bart Simpson' });

const Component = ({name, updateName}) => (
  <p onClick={
    () => updateName(name == 'Bart Simpson' ? 'Lisa Simpson' : 'Bart Simpson')
  }>
    Hello there, {name}! Click to change me.
  </p>
);

const MappedComponent = mapper(
  {
    // selectors
    name: store => store.get('name')
  },
  {
    // actions
    updateName: (store, ownProps, newName) => store.set('name', newName)
  }
)(Component);

render(
  <Container store={store}>
    <MappedComponent />
  </Container>
)

The Container component provides the store to all of it's nested children components via context. Its use is optional and you can pass the store down manually if you prefer, for example:

render(
  <MappedComponent store={store}/>
)

The mapper function is a performance convenience helper. It uses the given selectors to determine whether the mapped component should be rendered by doing shallow ref comparisons. This means it is important to create new objects when updating the store; otherwise, your components won't be updated. The actions are automatically injected with the store and the mapped component's props.

Routing and browser history syncing

Reduxless offers a straightforward mechanism for both routing (i.e. which components to render based on the URL) and keeping the browser URL and store state in sync. You can choose which properties in the store will trigger a pushState event and also whether the popstate event from the browser history navigation will update the store.

In the example above if we wanted the name property synced, it would be as simple as:

import { createStore, enableHistory } from 'reduxless/preact';

const store = createStore({ name: 'Bart Simpson' });
enableHistory(
  this.store,
  ['name']
);

Routing is as straightforward as:

import { h } from "preact";
import { Match, Link } from "reduxless/preact";

const store = createStore({ name: 'Bart Simpson' });

enableHistory(
  this.store,
  ['name']
);

const app = () => (
  <Container store={store}>
    <ul>
      <li>
        <Link href="/todos">Todos</Link>
      </li>
      <li>
        <Link href="/counter">Counters</Link>
      </li>
    </ul>

    <Match path="/todos">
      <Todos />
    </Match>

    <Match path="/counter">
      <Counter />
    </Match>
  </Container>
);

The documentation section below describes the API in more detail, including configuration details for using hash; how to validate the data from the URL; and controlling one-way or two-way binding between the store state and browser URL.

Documentation

Differences to Redux

The state is not one nested object but multiple objects. This means libraries like reselect won't work as expected. Redux is expected to be given a new object for each reducer. Libraries like ImmutableJS can help with making modifications to the state as efficient as possible, but ultimately recreating an object with many properties just to get a new reference is expensive. Another bottleneck with Redux is that every reducer has to run when an action is dispatched. See perfomance analysis for further details.

Change Log

This project follows semantic versioning.

LICENSE

MIT