- Written in TypeScript.
$ npm i functional-redux
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.
import { Action, AnyAction } from 'redux';
interface ConfirmOptions {
confirm?: () => boolean | Promise<boolean>;
filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
rejectedCallback?: () => void;
}
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.
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;
}
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.
import { Action, AnyAction } from 'redux';
interface WaitOptions {
milliseconds?: number;
filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
}
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.
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>;
}
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.
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",
};
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.
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
};
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.
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
};
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.
import { Action, AnyAction } from 'redux';
interface SubscribeOptions {
filter?: <T extends Action = AnyAction>(action: T) => boolean | Promise<boolean>;
}
const defaultOptions = {
filter: () => true,
};