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

@lsmoura/create-reducer

v1.0.2

Published

`yarn add @lsmoura/create-reducer`

Downloads

2

Readme

Create Reducer

yarn add @lsmoura/create-reducer

This helper lets the user creates simple or nested reducers.

API

createReducer(initialState, handlers [, wrapper])

initialState is an object or value that represents the initial state.

handlers is an object that has the format ACTION_NAME: reducer or key: handlers.

Some examples:

const handlers = {
  'ADD': (state, action) => (state + 1),
  'SUBTRACT': (state, action) => (state - 1),
};

or

const handlers = {
  'todo': {
    'ADD_TODO': (state, action) => state.concat(action.value),
  },
  'counter': {
    'ADD': (state, action) => (state + 1),
    'SUBTRACT': (state, action) => (state - 1),
  },
};

or even

const counterHandlers = {
  'ADD': (state, action) => (state + 1),
  'SUBTRACT': (state, action) => (state - 1),  
};
const handlers = {
  'todo': {
    'ADD_TODO': (state, action) => state.concat(action.value),
  },
  'counter': counterHandlers,
  'counter2': counterHandlers,
};

nested parameters will have their state extracted from the original state and the result will be assigned back to the key.

you can nest parameters as much as you like:

const counterHandlers = {
  'ADD': (state, action) => (state + 1),
  'SUBTRACT': (state, action) => (state - 1),  
};

const handlers = {
  'deeply': {
    'nested': {
      'counter': counterHandlers,
    },
  },
};

the createReducer function will ignore any handler key that starts with $. It will also send a default state for your reducer function if you provide a key of $defaultState and there is no state value assigned to the key you provide:

const handlers = {
  '$defaultState': 0,
  'ADD': (state, action) => (state + 1),
  'SUBTRACT': (state, action) => (state - 1),
};

wrapper is an optional parameter. it must be a function that will wrap your reducer function. It's recommended to use objectActionHandler as this parameter to help reduce the amount of "spreading" or "Assigning" on your reducers.

objectActionHandler

This is a wrapper helper that assigns the returned state to the existing one, like so:

function(reducer, state, action) {
  const reducerResult = reducer(state, action);

  return Object.assign({}, state, reducerResult);
}

Examples

Every example assumes that the module is imported in the following way:

import import createReducer, { objectActionHandler } from '@lsmoura/create-reducer';

Very simple counter

const reducer = createReducer(
  0,
  {
    'ADD': (state, action) => (state + 1),
    'SUBTRACT': (state) => (state - 1),
  },
  objectActionHandler
);

Counter with default state

const reducer = createReducer(
  undefined,
  {
    '$defaultState': 0,
    'ADD': (state, action) => (state + 1),
    'SUBTRACT': (state) => (state - 1),
  },
  objectActionHandler
);

Multiple counters that answer to the same action type

const counterHandlers = {
  '$defaultState': 0,
  'ADD': (state, action) => (state + 1),
  'SUBTRACT': (state) => (state - 1),
};

const reducer = createReducer(
  {},
  {
    counter: counterHandlers,
    counter2: counterHandlers,
  },
  objectActionHandler
);

Mixed stuff

const handleAddSubtract = {
  '$defaultState': 0,
  'ADD': (state, action) => (state + 1),
  'SUBTRACT': (state) => (state - 1),
};

const handleAddTodo = {
  '$defaultState': [],
  'TODO_INSERT': (state, action) => Array.concat(state, action.value),
};

const reducer = createReducer(
  defaultState,
  {
    'ADD': (state, action) => ({ action_count: 1 + (state.action_count || 0) }),
    counter: handleAddSubtract,
    counter2: handleAddSubtract,
    nesting_todos: {
      inner_object: {
        todos: handleAddTodo,
      },
    },
    nested: nestedReducer.handlers,
  },
  objectActionHandler
);

Author

Sergio Moura