JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 988
  • Score
    100M100P100Q130279F
  • License MIT

Hideaway middleware for Redux

Package Exports

  • hideaway

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hideaway) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Hideaway Middleware build status NPM

This middleware standardizes and reduces the code to state managing (Request, Response, Error,) and/or managing path inside one reducer.

Why do I need this?

If you want to standardize the use of redux and/or reduce the implementation of state management (Request, Response, Error).

Use one reducer to maintain a nested object informing the path.

Installation

npm install hideaway

or

yarn add hideaway

Examples

This is an interactive version of the code that you can play with online.

Settings

Store

To enable the hideaway, use applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import { hideaway } from 'hideaway';

createStore(reducers, applyMiddleware(hideaway));

or injecting a custom argument from redux-thunk

Composition

Using nested path

action.js

import { createAction } from 'hideaway';

export const addDeployment = (clusterName, tenantName, namespaceName, value) =>
  createAction('ADD_DEPLOYMENT', {
    payload: value,
    path: ['clusterName', 'tenantName', 'namespaceName'],
    keys: { clusterName, tenantName, namespaceName },
  });

reducer.js

import { createReducer } from 'hideaway';
import { combineReducers } from 'redux';

const initialState = {};

const k8sManager = createReducer(initialState);

const k8sReducers = k8sManager.combine({
  ADD_DEPLOYMENT: (state, action) => action.payload,
});

export const reducers = combineReducers({
  k8s: k8sReducers,
});

selector.js

import { getValue } from 'hideaway';

export const getNamespaces = (state, clusterName, tenantName) => {
  return getValue(state, {
    path: ['clusterName', 'tenantName'],
    keys: { clusterName, tenantName },
  });
};

API (use of redux-thunk)

action.js

import { createAction } from 'hideaway';

export const fetchTenants = (clusterName) =>
  createAction('FETCH_TENANTS', {
    api: () => fetch(`http://<HOST>/${custerName}`),
    path: ['clusterName'],
    keys: { clusterName },
    isStateManager: true,
  });

reducer.js

import { createReducer } from 'hideaway';
import { combineReducers } from 'redux';

const initialState = {};

const k8sManager = createReducer(initialState, { isStateManager: true });

const k8sReducers = k8sManager.combine({
  FETCH_TENANTS: (_, action) => action.payload,
});

export const reducers = combineReducers({
  k8s: k8sReducers,
});

selector.js

import { getState } from 'hideaway';

export const getTenants = (state, cluster) => {
  return getState(state, {
    path: ['cluster'],
    keys: { cluster },
  });
};

Documentation

Mention

This library is using the following libraries:

License

MIT