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

remodule

v1.0.0

Published

Taming Redux with modules

Downloads

21

Readme

Remodule for Redux

Redux for lazy people

logo

Warning! Do not read this article if you do not like an easier life.

Stop now if you enjoy any of following:

  • Lots of boilerplate
  • Doing the same thing in 3 different places
  • Creating lots of action creators and reducers
  • Splitting state management across multiple files and forgetting what is where
  • Missing out a step when setting up state

If on the other hand you want to get on building your app to get to MVP as quickly as possible then please read on.

What is Remodule

Remodule is Redux, but removes the tedious tasks of organizing, splitting and collating files. Also does away with the need for constants and creating actions and reducers. Remodule is simply a pattern to encapsulate actions and reducers into modules.

Remodule can be installed via npm

npm install remodule

For the seriously lazy skip to the Seriously Super Lazy Redux section below.

Modules

Remodule uses ES6 class syntax to encapsulate standard actions and reducers inside a classes. Actions and reducers inherit the name of their class in camel case. Actions and reducers can then be passed to a connect or store function such as in react-redux.

Just as in Redux actions return a type and a payload. The action type is the name of the reducers module of the state that will be updated. This does not need to be in the same module. Classes do not need to always a have action or reducer. Initial state can also be added to in the module.

Register

Each module file is imported into the remoule function and Remodule then maps all the actions to props, combines all the reducers and creates the redux store automatically.

##Example redux-app.js

export const register = 'core';

export const initialState = { 
  loading: false
}

export class RedirectTo {
  action (path) {
    browserHistory.push(path);

    return { type: 'DoNothing', payload: path };
  }
}

export class Loading {
  action (bool) {
    return { type: 'Loading', payload: bool };
  }

  reducer (state, action) {
    return { ...state, loading: action.payload };
  }
}

store.js

import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import * as redux from 'react-redux';
import remodule from 'remodule';
import * as app from './redux-app';

const { actions, mapStateToProps, store } = remodule([
  // register modules here
  app
]);

import remodule from '../../remodule/dist/remodule';
export default store({
  middleware: [ applyMiddleware(thunk)]
});

export const connect = Component =>
  redux.connect(mapStateToProps, actions)(Component);

Seriously Super Lazy Redux

For the majority of use cases Redux is used to as a simple getter and setter. If that is the case you can pass an initial true option to the remodule function. This will create actions and reducers for all modules as well as actions and reducers for all initialStates properties. The initialStates properties are prefixed with the module name as means of namespacing.

Heres how it redux-app.js now. redux-app.js

export const register = 'core';

export const initialState = { 
  loading: false
}

As above you can still add your own Remodule modules. But, there will already be an action setCoreLoading.

If like me you love redux but are too lazy for all that boilerplate then Remodule is for you.

Development

npm install
npm start

License

MIT