hideaway v1.0.0

Hideaway Middleware

This middleware helps to standardize and reduce the code when you use the stages (Request, Response, Error) or use redux with nested path.

Installation

npm install hideaway

or

yarn add hideaway

Why do I need this?

If you want to standardize the use redux and/or redux-thunk inside react with react-redux.

It is useful to work with calls to API and handling loading actions. (Require redux-thunk)

Work with nested path inside the reducer.

Examples

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

• Counter: Source | Sandbox

Settings

Store

Then, to enable hideaway, use applyMiddleware():

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

const middleware = [hideaway(), thunk];
createStore(reducers, applyMiddleware(...middleware));

Composition

Simple (without use of thunk)

action.js

export const incrementAction = () => ({
  type: 'INCREMENT',
});

export const decrementAction = () => ({
  type: 'DECREMENT',
});

reducer.js

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

const reducerManagement = new ReducerManagement({
  initialState: 0,
  isStateManager: false,
});

const counterReducers = reducerManagement.combine({
  INCREMENT: (state) => state + 1,
  DECREMENT: (state) => state - 1,
});

export const reducers = combineReducers({ counter: counterReducers });

selector.js

import { generateSelector } from 'hideaway';

export const getCounter = (state) => {
  return generateSelector(state, {
    path: ['counter'],
  });
};

App.js

// Other imports
import { getCounter } from "./selectors";

function App({ increment, decrement, state }) {
  const value = getCounter(state);
  return (
    // Component
  );
}

const mapDispatchToProps = {
  increment: incrementAction,
  decrement: decrementAction,
};

function mapStateToProps(state) {
  return { state };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

API (use of redux-thunk)

From the simple topic above, the change is inside the action only.

action.js

import { generateAction } from 'hideaway';

export const getScore = () =>
  generateAction('FETCH_SCORE', () => fetch('http://<HOST>'));

Handling loading action

From the simple topic above, the change is the flag isStateManager.

By default, ReducerManagement has isStateManager as true.

reducer.js

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

const reducerManagement = new ReducerManagement({
  initialState: 0,
  isStateManager: true,
});

const counterReducers = reducerManagement.combine({
  INCREMENT: (state) => state + 1,
  DECREMENT: (state) => state - 1,
});

export const reducers = combineReducers({ counter: counterReducers });

Nested tree

It is useful when you need to update different keys inside the object and cannot use reducer.

action.js

// For nested, it is necessary the keys and the path
export const incrementAction = () => ({
  type: 'INCREMENT',
  nested: {
    keys: { cluster: 'X', namespace: 'Y' },
    path: ['cluster', 'namespace'],
  },
});

reducer.js

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

const reducerManagement = new ReducerManagement({
  isStateManager: false,
  isNested: true,
});

// For nested, it returns null if it doesn't find the value
const counterReducers = reducerManagement.combine({
  INCREMENT: (state) => (state || 0) + 1,
  DECREMENT: (state) => (state || 0) - 1,
});

export const reducers = combineReducers({ counter: counterReducers });

selector.js

import { generateSelector } from 'hideaway';

export const getCounter = (state) => {
  return generateSelector(state, {
    path: ['cluster', 'namespace'],
  });
};