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

react-lodux

v1.0.52

Published

Single store module for react in a one-way observable pattern.

Downloads

12

Readme

Deprecated package

This package is deprecated. Please check lodux/react from package lodux.

Single store management for react component.

Single store module for react in a one-way observable pattern.

This is the first stable version 1.

Connects lodux store and react component.

To start,

  1. write a 'creator':
    A 'creator' is a function of dispatchers and reducers, similar to redux. Then connect(the react class, creator).

  2. within the constructor() of React component:
    set the state as this.state = store.state. Here the store.state is the value of initial store state.

  3. And within the render() of React component:
    reading the state is the ordinary react this.state.someproperty.

  4. For activities (updating state):
    properties of the dispatchers will be the core of state activities. Use store['any one of the dispatchers property'] to trigger the corresponding dispatcher, then react-lodux will trigger react's setState() to update the react renderer.

summary
trigger a dispatcher -> reducer responses and update store state -> react-lodux trigger react's setState() -> react renderer refresh

Example

import React, { Component } from 'react';
import { Store, connect } from "react-lodux";

class Counter extends Component {
    constructor() {
        super();
        this.state = store.state;
    }

    public render() {
        return <div>
            <p>Current count: {this.state.count}</p> &nbsp;
            <a href="#" onClick={()=>store.add(10)}>add</a>
        </div>
    }
}

const creator = store => {
    const dispatchers = {
        add: count => store.dispatch({ type: 'add', count })
    };

    const reducers = () => {
        store.reduce('add', action => ({ count: store.state.count + action.count }));
    };

    return { reducers, dispatchers };
};

const initialState = { count: 13 };

const store = connect(Counter, creator).done();
store.diduce({type:'initial', ...initialState});

API

creator
'creator' is a collection of dispatchers and reducers.

const creator = store => {
    const dispatchers = {
        add: amount => {
            store.dispatch({type:'add', count: amount});
        }
    };
    
    const reducers = () => {
        store.reduce('add', action => ({ ...store.state, count: store.state.count + action.count} }));
    };

    return { dispatchers, reducers };
};

//An alternative is by using the store.diduce(). Using this alternative free you from writing reducers. 
const creator = store => {
    const dispatchers = {
        add: count => {
            store.diduce({type:'add', count: store.state.count + action.count});
        }
    };
    
    return { dispatchers };
};

Binder

It binds lodux to React component. Binder invocation is chainable and communtative (order is irrelevant).

connect(class, creator): binder

const binder = connect(Counter, creator);

applyUndoable(): binder
This will add additional methods (undo, redo) to the store, and applyUndoable() internally rearranges the store state into {stack[state], future:[]}.

public render() {    
    return <div>
        <p>Current count: {this.state.count}</p> &nbsp;
        <a onClick={() => store.add(10)}>add</a> &nbsp;

        <a onClick={()=>store.undo()}>undo</a> &nbsp;
        <a onClick={()=>store.redo()}>redo</a>
    </div>
}

binder = binder.applyUndoable();

//additional properties will be attached to the store
const { state, raw_state /**stack and future**/, undo, redo, add } = store

applyMiddleware(): binder

const log = store => next => (action, func) => {
            console.log('log dispatches action', action);
            return next(action, func);
        };

const binder = binder.applyMiddleware([log]);

done: store
done() should be the last call because it will break the chain and return a store.

//communtative chain invocation
binder = binder.applyUndoable().applyMiddleware([log]);
//same as 
binder = binder.applyMiddleware([log]).applyUndoable();

const store = binder.done();

noConflict()
<script src="where /dist/react-lodux.js is located"></script>

//if in conflict
const react_lodux = window['react-lodux'].noConflict();

npm installation

npm install --save react-lodux

testing with HMR

When testing with react-hot-loader, you might find the whole page being reloaded rather than modular refresh.

It is because react-hot-loader needs to set up duplicate modules. Duplicate modules leads to duplicate stores. The problem is that lodux will throw error when there are duplicate stores. When react-hot-loader encounters exception, it reloaded the whole page.

To enable modular refresh, set the Store configuration to recognize HMR before doing any react-lodux binding.

Store.config({ isHMR: true });

other notes

ES6 compilation (e.g. webpack ES6 configuration).
No dependencies.