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

xreducer

v0.9.1

Published

Create Redux reducers without switch statements or action objects. Less boilerplate, more fun!

Downloads

22

Readme

xReducer npm version

Create Redux Reducers without switch statements or action objects. In short less boilerplate, more fun!

How To Install

yarn add xreducer

xReducer is just a set of javascript functions, and have literally zero hard dependencies! So you can right away use it in any Redux project along with existing reducers. No migration is required!

Why Do I Need This?

Redux is an awesome library, but it makes us write a lot of boilerplate - Action objects, action creators, switch statements..., and other repeating code while connecting the UI components to a Store.

What if we could avoid some of them, and create reducers from a set of simple functions / handlers / actions!?

Using With ReactJs

1. Reducer: Calling createReducer with a map of action handlers, and the initial state; would return a reducer function. You can then use this function with Redux like a conventional reducer.

// Reducer
import { createReducer } from 'xreducer';

const initialState = {
  count: 1
};

const reducer = createReducer({
  inc: state => ({ count: state.count + 1 }),
  dec: state => ({ count: state.count - 1 })
}, initialState);

export default reducer;

2. Connect Component: Use reducer.getActions in place of mapDispatchToProps while connecting, and all the actions will be available under props!

// React Component
import React from 'react';
import { connect } from 'react-redux';
import reducer from './reducer';

class Counter extends React.Component {
  render() {
    return <p>
      {this.props.count}
      <button onClick={this.props.inc}>Inc</button>
    </p>
  }
}

export default connect(state => state, reducer.getActions)(Counter);

Thats it. Isn't that simple!? :sunglasses:

Action Types

xReducer supports 3 types of action handlers. Default is action().

  1. action((state, payload) => {}, options) - Executes inside the reducer and manages state.
  2. func((actions, getReducerState, payload, helpers) => {}, options) - Executes outside, for side effects logic without dispatch.
  3. reduxThunk((actions, getState, payload, helpers) => {}, options) - For side effects logic with dispatch (Needs redux-thunk middleware).

Supported Features

I am trying my best to improve the documentation. But until then, the UTs must give you a sound idea about xReducer APIs and supported features.

Unit Tests for some interesting features:

  1. Reducer composition
  2. Immer support
  3. Persisting data using localStorage
  4. Debouncing actions
  5. Thunk support

Contributions & Bug Report

  • Do you have an enhancement in mind? Or found a bug? Please create a new issue for the same in xReducer issues page.
  • And always, feel free to submit a Pull Request with the changes you would like to see.

License

This project is licensed under the MIT license. See the LICENSE file for more info.