Neptune's Potato Monsters


    0.0.2 • Public • Published


    This is a work in progress and is in very early stages of development

    redux-blocks is a library for isolating and combining redux modules (referred to here on out as blocks). It makes writing reusable redux code easier and more flexible.


    npm install --save redux-blocks

    Examples and tests

    If you know Redux then the simplest way to understand redux-blocks is to look at the tests for mount and merge.

    You can also look at the real world example application code here .


        import {merge,mount} from 'redux-blocks';
        import {selectors,actions,types,reducer} from 'your code';
        import MoreReduxCode from 'some more of your code';
        const mounted = mount("point")({
        const merge(MoreReduxCode,mounted);

    What are redux blocks?

    Redux blocks are objects with the following syntax:

            selectors: {},
            actions: {},
            types: {}
            reducer: function(){}

    A simple example of an api request block looks like this:

        const RequestBlock ={
            types: {
            selectors: {
                get: state,id=>state.entities[id]
            actions: {
                request: id=>({
                    type: "REQUEST",
                success: entity=>({
            reducer: function(state={entities:{}},action){
                    case "SUCCESS":
                        return {
                            entities: {
                        return state;

    The redux-blocks library provides two methods to isolate and combine blocks - mount and merge.

    Mounting blocks

    Calling mount('point')(block) will isolate selectors and reducers to a section of the state under point (I.E. the reducer's state will actually be the contents in state.point). Type strings will have a "POINT" prefix added to it, and any action that returns a type in types will have the appropriate type associated with it.

    If we take the previous example of a simple request block, the result of mounting it at "point" will look like this:

        const mounted = mount('point')(RequestBlock);
        mounted.types.REQUEST; // "POINT_REQUEST"
        mounted.actions.request(5); // {type:"POINT_REQUEST",id:5}
        mounted.actions.success({id:5,name:"me"}); // {type:"POINT_SUCCESS"...}
        //state now looks like this:
        mounted.reducer(); // {point:{entities:{}}}
            point: {
                entities: {
                    5: {id:5, name:"me"}
        //will return {id:5, name:"me"}

    Merging blocks

    calling merge(block1,block2) will merge blocks into a single block whose actions, selectors and types are a combination of both modules selectors, actions and types. The merged block's reducer is a new function that calls each reducer in turn (I.E. it composes reducers)

    Working with redux-saga

    redux-blocks provides support for redux-saga. Instead of importing redux-blocks import redux-blocks/saga. Once imported, merge will make sure to combine the saga property in every block. Mounting a block with redux-saga makes sure that any put action overrides the type with the mounted one and any take action correctly registered for the mounted type.




    npm i redux-blocks





    Last publish


    • alonbd