Functional Redux

Features

• Written in TypeScript.

Installation

$ npm i functional-redux

redux-confirm

import { applyMiddleware, createStore } from 'redux';
import { createConfirmMiddleware } from "functional-redux";

import reducer from './store/reducer';

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createConfirmMiddleware())
);

You may also pass options to the createConfirmMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface ConfirmOptions {
  confirm?: () => boolean | Promise<boolean>;
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
  rejectedCallback?: () => void;
}

redux-intercept

import { applyMiddleware, createStore } from 'redux';
import { createInterceptMiddleware } from "functional-redux";

import reducer from './store/reducer';

const interceptOption = {
  filter: (action) => {
    return !action.type.match(PERMIT_REGEX)
  }
};

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createInterceptMiddleware(interceptOption))
);

You should pass options to the createInterceptMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface InterceptOptions {
  filter: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
  rejectedCallback?: <T extends Action = AnyAction>(action: T) => void;
}

redux-wait

import { applyMiddleware, createStore } from 'redux';
import { createWaitMiddleware } from "functional-redux";

import reducer from './store/reducer';

const waitOption = {
  milliseconds: 3000
};

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createWaitMiddleware(waitOption))
);

You may also pass options to the createWaitMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface WaitOptions {
  milliseconds?: number;
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
}

redux-enricher

import { applyMiddleware, createStore } from 'redux';
import { createEnricherMiddleware } from "functional-redux";

import reducer from './store/reducer';

const enricherOption = {
  enrich: (action) => ({...action, created: new Date()})
};

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createEnricherMiddleware(enricherOption))
);

You may also pass options to the createEnricherMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface EnricherOptions {
  enrich: <T extends Action = AnyAction, S extends Action = AnyAction>(action: T) => S
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
}

redux-record

import { applyMiddleware, createStore } from 'redux';
import { createRecordMiddleware } from "functional-redux";

import reducer from './store/reducer';

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createRecordMiddleware())
);

store.dispatch({type: "START_REDUX_RECORD"});
store.dispatch(YOUR_ACTION);
store.dispatch({type: "STOP_REDUX_RECORD"});
store.dispatch({type: "CALLBACK_REDUX_RECORD", callback: (history) => {console.log(history)}});
store.dispatch({type: "REPLAY_REDUX_RECORD"}); // REPLAY

You may also pass options to the createRecordMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface RecordOptions {
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
  START_REDUX_RECORD?: string;
  STOP_REDUX_RECORD?: string;
  RESUME_REDUX_RECORD?: string;
  CALLBACK_REDUX_RECORD?: string;
  REPLAY_REDUX_RECORD?: string;
}

const defaultOptions = {
  filter: () => true,
  START_REDUX_RECORD: "START_REDUX_RECORD",
  STOP_REDUX_RECORD: "STOP_REDUX_RECORD",
  RESUME_REDUX_RECORD: "RESUME_REDUX_RECORD",
  CALLBACK_REDUX_RECORD: "CALLBACK_REDUX_RECORD",
  REPLAY_REDUX_RECORD: "REPLAY_REDUX_RECORD",
};

redux-throttle

import { applyMiddleware, createStore } from 'redux';
import { createThrottleMiddleware } from "functional-redux";

import reducer from './store/reducer';

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createThrottleMiddleware())
);

store.dispatch({type: "YOUR_ACTION"}); // WORKS
store.dispatch({type: "YOUR_ACTION"}); // DOESN'T WORK

You may also pass options to the createThrottleMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface ThrottleOptions {
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
  milliseconds?: number;
}

const defaultOptions = {
  filter: () => true,
  milliseconds: 50
};

redux-spread

import { applyMiddleware, createStore } from 'redux';
import { createSpreadMiddleware } from "functional-redux";

import reducer from './store/reducer';

const spreadOption = {
  milliseconds: 1000
};

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(createSpreadMiddleware(spreadOption))
);

store.dispatch({type: "YOUR_ACTION"}); // WORKS
store.dispatch({type: "YOUR_ACTION"}); // WORKS AFTER 1000ms

You may also pass options to the createSpreadMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface SpreadOptions {
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
  milliseconds?: number;
}

const defaultOptions = {
  filter: () => true,
  milliseconds: 50
};

redux-subscribe

import { applyMiddleware, createStore } from 'redux';
import { createSubscribeMiddleware } from "functional-redux";

import reducer from './store/reducer';

const subscribeMiddleware = createSubscribeMiddleware();

// Create the Redux store.
const store = createStore(
  reducer,
  applyMiddleware(subscribeMiddleware)
);

const unsubscribe = subscribeMiddleware.subscribe((action) => {
  console.log(action);
});

store.dispatch({type: "YOUR_ACTION"}); // LOGGED
unsubscribe();
store.dispatch({type: "YOUR_ACTION"}); // NOT LOGGED

You may also pass options to the createSubscribeMiddleware function.

Available options

import { Action, AnyAction } from 'redux';

interface SubscribeOptions {
  filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
}

const defaultOptions = {
  filter: () => true,
};