2.0.0 • Published 6 years ago
redux-command-handler v2.0.0
Redux command handler
redux-command-handler
is a library that aims to separate commands from events instead of have just actions. Using this libraries all redux actions becames events and events are generate just by commands.
Commands with side effects are not a problem at all.
How to use
get-user-command.js
export default async (commandPayload, eventDispatcher) => {
eventDispatcher('USER_REQUESTED'); //dispatch event { type: 'USER_REQUESTED' } into redux store
const userId = commandPayload.id;
const user = await fetch(`/user/${userId}`).then(response => response.json());
eventDispatcher('USER_LOADED', user); // event { type: 'USER_LOADED', payload: {...}}
};
command-handler.js
import getUserCommand as GET_USER from './get-user-command';
import { createCommandHandler } from 'redux-command-handler';
export default createCommandHandler({ GET_USER });
show-user-button.js
import React from 'react';
import commandHandler from './command-handler';
const ShowComponent = props => {
return (<button onClick={props.dispatch('GET_USER', { id: props.userId })}>Show User</button>);
};
const mapStateToProps = state => state;
export default connect(mapStateToProps, commandHandler)(ShowComponent);
Combine commands
command-handler.js
import payBillCommand from './pay-bill-command';
import showReceiptCommand from './show-receipt-command';
import { createCommandHandler, combineCommandHandlers } from 'redux-command-handler';
const PAY_BILL = combineCommandHandlers(payBillCommand, showReceiptCommand);
export default createCommandHandler({ PAY_BILL });
Parallelize commands
command-handler.js
import getUserCommand from './get-user-command';
import trackGetUserCommand from './track-get-user-command';
import { createCommandHandler, parallelizeCommandHandler } from 'redux-command-handler';
const GET_USER = parallelizeCommandHandler(getUserCommand, trackGetUserCommand);
export default createCommandHandler({ GET_USER });