Package Exports
- redux-fun
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 (redux-fun) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
redux-fun 🔧
Redux functional programming utilities
Install
$ npm install --save redux-funDocumentation
Reducers
Compose reducers
const { composeReducers, pipeReducers } = require('redux-fun');
const reducer_1 = composeReducers(r3, r2, r1);
const reducer_2 = pipeReducers(r1, r2, r3);Convert updaters
const { toReducer } = require('redux-fun');
const updater = (action) => state => state;
const reducer = toReducer(updater);Updaters
updater with initial state
const { withDefaultState } = require('redux-fun');
// normal
const updater_1 = withDefaultState({}, action => state => state);
// curried
const updater_2 = withDefaultState({})(action => state => state);Middlewares
Compose middlewares
const { composeMiddlewares, pipeMiddlewares } = require('redux-fun');
const middleware_1 = composeMiddlewares(m3, m2, m1);
const middleware_2 = pipeMiddlewares(m1, m2, m3);Preserve async flow (deprecated)
Use preserveAsyncSeries instead
Preserve async series
Respect the dispatch order with async middleware
js const { preserveAsyncSeries } = require('redux-fun'); const middleware_1 = preserveAsyncSeries('ACTION_TYPE') const middleware_2 = preserveAsyncSeries(['ACTION_TYPE_1', 'ACTION_TYPE_2'])
Handlers
A Handler from the handle-io library can be tranformed into redux middleware using createHandleIOMiddleware function.
Redux Handlers
A redux handler run every time an action was dispatched.
It takes two arguments:
- action
- reduxHandleIOApi
The reduxHandleIOApi object provides 3 IOs functions :
- getState
- dispatch
- next
Please see handle-io documentation for more details.
e.g.
const { io, handler } = require('handle-io');
const sleep = io(s => new Promise(resolve => setTimeout(resolve, s * 1000)));
// delayed action example
const myHandler1 = handler(function*(action, { next }) {
yield sleep(1);
return yield next(action);
});
// preserve dispatch order
const myHandler2 = handler(function*(action, { next, dispatch }) {
const nexted = yield next(action);
yield dispatch({ type: 'DUMMY_ACTION' });
return nexted;
});
// print state
const log = io(console.log);
const myHandler3 = handler(function*(action, { next, getState }) {
const nexted = yield next(action);
const state = yield getState();
yield log(state);
return nexted;
})Note: A redux handler acts as an async middleware.
testReduxHandler
testReduxHandler is an extension of handle-io#testHandler
it adds 3 match*() methods:
- .matchNext() - 2 arguments:
- next argument (assert)
- next return (mock)
- .matchDispatch() - 2 arguments:
- dispatch argument (assert)
- dispatch return (mock)
- .matchGetState() - 1 argument:
- getState return (mock)
e.g.
const { handler } = require('handle-io');
const { testReduxHandler } = require('redux-fun');
const createDummyAction = (payload) => { type: 'DUMMY_ACTION', payload }
const myAction = { type: 'MY_ACTION', payload: {} };
const myHandler4 = handler(function*(action, { dispatch, getState, next }) {
const { value } = yield getState();
yield dispatch(createDummyAction(value));
return yield next(myAction);
})
testReduxHandler(myHandler4, myAction)
.matchGetState({ value: 42 })
.matchDispatch(createDummyAction(42))
.matchNext(myAction, 'returned value')
.shouldReturn('returned value')
.run()createHandleIOMiddleware
usage:
const { createHandleIOMiddleware } = require('redux-fun');
const handleIOMiddleware = createHandleIOMiddleware(myHandler1, myHandler2, myHandler3, myHandler4)Selectors
Bind selectors
const { bindSelectors } = require('redux-fun');
const selectors = {
getUsers: (state) => state.users,
getUser: (state, { id }) => state.users[id],
}
const boundSelectors = bindSelectors(selectors, store.getState);
const user = boundSelectors.getUser({ id: 1 });getOwnProp
getOwnProp is very useful to use with createSelector from reselect
const { createSelector } = require('reselect');
const { getOwnProp } = require('redux-fun');
const getUsers = (state = {}) => state.users || {}
const getUserByName = createSelector(
getUsers,
getOwnProp('fullName'),
(users, fullName) => users[fullName]
)
getUserByName({ users: { user1: true } }, { fullName: 'user1' }); // => true