redux-event-emitter
Version:
Redux Event Emitter Middleware
146 lines (118 loc) • 4.17 kB
Markdown
# Redux-Event-Emitter Middleware
[](https://raw.githubusercontent.com/mariotacke/redux-event-emitter/master/LICENSE) [](https://badge.fury.io/js/redux-event-emitter)
A [Redux](https://github.com/reactjs/redux) middleware to reduce only one line of code (you don't have to import specific action). Instead I change it to an emitter so that you can fire events with a simple api. Why so? I migrate some code from Electron to React Native so I want to keey the strusture of code unchanged. So this is a replacement (inspired) for Redux-Electron-IPC. With this libray, you may refactor your electron code and reat native code into a common shared code and refactor out Electron's IPC(possibly).
## Install
### [npm](https://www.npmjs.com/package/redux-event-emitter)
```sh
npm install --save redux-event-emitter
```
## Working Demo Example
Check out the full [demo](https://github.com/HamiltonWang/redux-event-emitter/tree/master/example)
application.
### Usage
```js
import { applyMiddleware, createStore } from 'redux';
import { reduxEventEmitter } from 'redux-event-emitter';
import { pingActionCreator } from './actions';
import { exampleReducer } from './reducer';
// register an action creators to an event
const ipc = reduxEventEmitter.createEvents({
'ping': pingActionCreator, // receive a message
...
});
// and/or if you want once
const ipc2 = reduxEventEmitter.once({
pongActionCreator, // another way of writing it if you don't want a different key
...
});
const store = createStore(exampleReducer, applyMiddleware(ipc, ipc2));
// emit a message with arguments through the `emit` utility function
// emit(channel, paramter)
store.dispatch(reduxEventEmitter.emit('ping', { a:1, b:3, c:5 }));
// disable it
reduxEventEmitter.off('ping');
```
### Action
```js
...
function pingActionCreator ( arg1, arg2 ) {
return {
type: 'IPC_PING',
arg1,
arg2
};
}
...
```
### Reducer
```js
...
function exampleReducer (state = {}, action) {
switch (action.type) {
case 'IPC_PONG':
console.log('Pong', action);
return state;
case 'IPC_PING':
console.log('Ping', JSON.stringify(action));
return state;
default:
return state;
}
}
...
```
### Events
The key designates the `events-emitter` channel; the value is a redux action
creator to be dispatched.
```js
{
'channel name': (...args) => {
return {
type: 'YOUR_ACTION_TYPE',
... optional mapping of arguments ...
}
}
}
```
### Examples
#### Sending an event
Use the utility function `emit` to issue an event-emitter message. The
method signature is the same as ipcRenderer's send.
Behind the scenes, the middleware will trigger the tiny-emitter on the given channel with any number of arguments.
```js
import { reduxEventEmitter } from 'redux-event-emitter';
store.dispatch(reduxEventEmitter.emit('event channel', ...args));
```
#### Receiving an reducers event
To receive events, register a channel response when configuring the middleware.
e.g. include all your action functions into createEvents so that all can be called by using reduxEventEmitter.
### example
```js
const ipc = reduxEventEmitter.createEvents({
receiveLocale, //<-- first action function
lndSyncStatus, //<-- second action function
...
});
const store = createStore(exampleReducer, applyMiddleware(ipc));
```
### action function
```js
...
export const receiveLocale = (locale) => dispatch => {
dispatch(setLocale(locale))
}
...
```
## What about `redux-thunk`?
`redux-event-emitter` supports thunks out of the box as long as you install `redux-thunk` and apply the thunk middleware before the ipc middleware.
### Example
```js
const ipc = reduxEventEmitter.createEvents({
'ipc channel name': () => dispatch =>
dispatch({ type: 'DELAYED_ACTION_TYPE' })
});
const store = createStore(exampleReducer, applyMiddleware(thunk, ipc));
```
## Questions
For any questions, please open an [issue](https://github.com/HamiltonWang/redux-event-emitter/issues).
Pull requests (with tests) are appreciated.