Package Exports

react-action-listener

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 (react-action-listener) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-action-listener

Middleware which allows listening actions of Context and Redux

Usages

Much like `redux-saga`

import { createMiddleware } from 'react-action-listener';

const listener = createMiddleware();
// 1. Apply middleware.
const store = createStore(reduce, {}, applyMiddleware(listener);

// 2. Register listener.
listener.addListener((action, dispatch) => {
  // Now you can listen 'ADD' when button is pressed.
  // {"type":"ADD","payload":1}
  console.log(`${JSON.stringify(action)}`);
});

const onClickPlus = () => {
  // When button is clicked an action 'ADD' is dispatched.
  dispatch({ type: 'ADD', payload: 1 });
};

return <button onClick={onClickPlus}>add</button>;

Hook

import { createMiddleware, useActionListener } from 'react-action-listener';
// 1. Apply global middleware.
const store = createStore(reduce, {}, applyMiddleware(createMiddleware()));

// 2. Use hook.
useActionListener('ADD', (action, dispatch) => {
  // Now you can listen 'ADD' when button is pressed.
  // {"type":"ADD","payload":1}
  console.log(`${JSON.stringify(action)}`);
});

const onClickPlus = () => {
  // When button is clicked an action 'ADD' is dispatched.
  dispatch({ type: 'ADD', payload: 1 });
};

return <button onClick={onClickPlus}>add</button>;

Context

import { createMiddleware } from 'react-action-listener';

function increaseAction(dispatch: Dispatch<AnyAction>) {
  const action = {
    type: 'INCREASE',
    payload: 1,
  };

  // 1. Apply middleware.
  middleware(action);
  dispatch(action);
}

// 2. Use hook.
// Note: when you use Context, dispatch is not provided as parameter.
useActionListener('INCREASE', (action) => {
  // {"type":"ADD","payload":1}
});

Hybrid

You can also use both hook and much like redux-saga

import { createMiddleware } from 'react-action-listener';
// 1. Apply global middleware.
const listenMiddleware = createMiddleware();

useActionListener('TEST', (action) => {
  //...
});

listenMiddleware.addListener('TEST', (action) => {
  // ...
});

Install

npm i react-action-listener
yarn add react-action-listener

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page. You can also take a look at the contributing guide.

Contributors

👤 Jeong Hoon Park

📝 License

This project is MIT licensed.