@modular-toolkit/bricks NPM

bricks

Tools for connecting high-level Redux components (“Bricks”).

Installation

npm install --save @modular-toolkit/bricks

Note: by default, the npm package exposes ES5-compatible code (transpiled through Babel).

If you want to use the untranspiled code (highly recommended), us the esnext version, which is included in the same npm package (more info here).

API

BrickManager

The Brick Manager allows you to “wire up” Bricks in your application by running each Brick's root saga with the Redux Saga middleware, preparing each Brick's selectors to work with the global Redux state, and replacing the current root Reducer with a new reducer that includes each Brick's reducer.

Here is an example taken from the demo app that shows how it is used:

demo-app/src/configureStore.js

import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import createInitialState from './createInitialState';
import reducer from './reducer';
import hackerNews from '@modular-toolkit/demo-module';
import gists from '@modular-toolkit/other-demo-module';
import { BrickManager } from '@modular-toolkit/bricks/BrickManager';

const initialState = createInitialState();

export default () => {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(reducer, initialState, sagaMiddleware);
    const brickManager = new BrickManager({ store, reducer, sagaMiddleware });
    brickManager.installBricks({
        'bricks.hackerNews': hackerNews,
        'bricks.gists': gists
    });
    return store;
};

combineReducers

This function works exactly the same as combineReducers from Dan Abramov's Redux library, except that it does not issue a warning when an initial state is encountered that contains keys for which there are no reducers defined.

Use this version of combineReducers if you want to combine reducers in your main application, while providing an initial state for Bricks that are added at a later point using the Brick Manager (e.g. when hydrating a server-side rendered page).

Here is an example taken from the demo app that shows how it is used:

demo-app/src/reducer.js

import { CHANGE_BACKGROUND_COLOR } from './actions';
import { combineReducers } from '@modular-toolkit/bricks';

export default combineReducers({
    page(state = {}, action = {}) {
        switch (action.type) {
            case CHANGE_BACKGROUND_COLOR:
                return {
                    ...state,
                    backgroundColor: action.backgroundColor
                };
            default:
                return state;
        }
    }
});

Troubleshooting

Console Warning: “Unexpected key XXX found in previous state received by the reducer”

If you get this warning in your browser console, you're using combineReducers from the Redux library. Use combineReducers from modular-tookkit instead (see above).

Change Log

See CHANGELOG.md

Contribution Guidelines

See CONTRIBUTING.md

Acknowledgements

Includes code taken from Redux (combineReducers) MIT licensed Copyright © 2015–present Dan Abramov
The BrickManager module is inspired by Reedux MIT licensed Copyright © 2017 Silviu Marian