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

redux-breeze

v4.0.3

Published

>Powerful redux wrapper to make handling redux actions and reducers a breeze!

Downloads

15

Readme

redux-breeze

Powerful redux wrapper to make handling redux actions and reducers a breeze!

CircleCI

Library to make managing state, actionCreators, reducers in your redux application a breeze. You can finally stop copyPasting and start actually coding! :)

Note: This library is designed to help experienced developers in complex apps. If you are new to redux you definately should first learn how to use it, and when you get familiar with it and get bored by copying a lot of code, you can return to reduxBreeze ;)

Note2: This library is in early stage of development. Use at you own risk and, if you like the idea, feel free to help me making it epic! ;)

FAQ

Why this exists?

Redux is really great! It allows you to have whole application state in one, easily accessible place and manage it in a predictable way. All is good... until your application gets big and you write tens or even hundreds of same reducer cases and action creators. You start thinking: "that's a lot of work a computer is perfect at: copying stuff around" Exactly!

Are there good alternatives?

Let me know if you find one.

I found a bug! What should I do?

There are at least 3 options:

  1. Add an issue, write test(s) for bug you found, write fix that will make your test(s) pass, submit pull request
  2. Add an issue, write test(s) for bug you found, submit pull request with you test(s)
  3. Add an issue

All contributions are appreciated!

Documentation

Ok, so what do I get?

Let's imagine you created forms. A lot of forms. And you wanted to keep values in redux state.

Most likely you have a lot of similar code in your app

export default function formReducer(state = initialState.form, action) {
  switch (action.type) {
    case CHANGE_FULL_NAME:
      return {
        ...state,
        fullName: action.payload,
      };
    default:
      return state;
}

export function changeFullName(fullName) {
  return {
    type: CHANGE_FULL_NAME,
    payload: fullName,
  };
}

What if I tell you that you can avoid writing these action creators and reducers? And, no, not by creating one CHANGE_FORM_FIELD action. ;) You can actually avoid writing even the single reducer or a single action creator!

Only define something like:

changeFullName: {
  type: 'default',
  result: {
    fullName: 'payload',
  },
}

And that's all! No action creators written. No reducer cases! You want default values? Or maybe custom initial value?

changeFullName: {
  type: 'default',
  result: {
    fullName: { source: 'payload', default: 'John Doe', initial: 'No full name here yet' },
  },
}

And then use it like this:

this.props.changeFullName('John Smith');

...

connect(
  null,
  {
    changeFullName: reduxBreezeInstance.getAction('changeFullName'),
  }
)(MyFancyComponent);

"Huh, that's very simple example" you say. That is. But reduxBreeze is infinitely extensible! If you haven't found plugin that fits your use case (like using custom redux middleware and strangely managing side-effects) you can write your own in no-time. It's like writing your actionCreator, reducer and initialState ONCE. Once and for all!

Interested? Dive into the documentation :)

Plugins

I wanna help!

Great!

All pull requests are appreciated as long as the code is well tested, documented and linted ;)

You may grab a thing from todo (see below) or write plugins for your use-case.

Todo

  • write action definitions validation (by default only checking for 'type' field, but make it plugin enabled)
  • add more plugins:
    • redux-saga
    • redux-thunk
  • add selectors functionality (plugin-enabled)