rcm

redux-create-module

A simpler higher-level Redux library

Showing:

Popularity

Downloads/wk

1

GitHub Stars

60

Maintenance

Last Commit

4yrs ago

Contributors

3

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

A single function that returns a reducer, action creators, and action types. This is just a little helper whose is goal is to remove the need of manually making some of the boilerplate, such as constants and action creators.

Installation

npm install --save redux-create-module

API

There's only one function

createModule(name, initalState, handler) -> {reducer, actions, types}

Params

name is just a string that will be included in the action types.

initialState is, well, the initial state for the module.

handler is where it gets interesting. It's an object where the keys are action names and the values are action handlers. For example:

const counter = createModule('counter', 0, {
  increment: (state, action) => state + 1,
  decrement: (state, action) => state - 1
})

Returns

This function returns an object with three things:

actions is an object with action creators. for example: counter.actions.increment() will return { type: 'counter/increment', payload: {} }

reducer is regular reducer that you can pass to the redux store or to combineReducers

types is an object with the generated action types. For example: counter.types.increment is equal to counter/increment This is useful to handle an action from another module. for example, if we wanted to make another module that tracks how many times the counter was incremented:

const timesIncremented = createModule('timesIncremented', 0 {
  [counter.types.increment]: (state, action) => state + 1
})

Basic Usage

// counter.js

import createModule from "redux-create-module";

const counter = createModule('counter', 0, {
  increment: (state, action) => state + 1,
  decrement: (state, action) => state - 1
});

export default counter.reducer;
export const actions = counter.actions;

// actions.increment() -> {type: 'counter/increment', payload: {}}
// app.js

import React from "react";
import { connect } from "react-redux";
import { actions } from "./counter";

const App = ({ count, dispatch }) => (
  <div>
    {count}
    <button onClick={() => dispatch(actions.increment())}>Increment</button>
  </div>
);


export default connect(state => ({ count: state }))(App);
// store.js

import { createStore } from "redux";
import counter from "./counter";

let store = createStore(counter);

export default store;

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial