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, React hook which allows listening actions of Context or Redux

Install

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

Usages

Much like `redux-saga`

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

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

// 2. Register listener.
middleware.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.
  // Note: You must provide 'type'
  store.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.
  store.dispatch({ type: 'ADD', payload: 1 });
};

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

Context

import { createMiddleware, useActionListener } from 'react-action-listener';
// Note: you must provide config.isContext = true
// You will able to see redux-logger style logs for dispatched action when you provide isDebugContext = true
const middleware = createMiddleware({ isContext: true, isDebugContext: true });

const [state, dispatch] = useReducer(counterReducer, initialValues);

function increaseAction(dispatch) {
  const action = {
    type: 'ADD',
    payload: 1,
  };

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

// 2. Use hook.
// Note: when you use Context, dispatch will not provided as parameter.
useActionListener('ADD', (action) => {
  // {"type":"ADD","payload":1}
  console.log(`${JSON.stringify(action)}`);
});

Hybrid

You can also mix up.

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

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

middleware.addListener('ADD', (action, dispatch) => {
  // ...
});

API

createMiddleware({ isContext, isDebugContext });

isContext: boolean
- When you want to use middleware with Context you must provide this to true
- Note: You will not able to use middleware with Redux.
isDebugContext: boolean
- When you use middleware with Context, you can also logs dispatched actions by setting it true.

useActionListener(actionType, listener);

actionType: string | string[]
- The action type or an array of action types to match.
listener: (action, dispatch) => void
- The callback function which will be called when an action of specified types is dispatched.
- action: object
  - Dispatched action.
- dispatch: Dispatch<AnyAction>(action: AnyAction) => AnyAction
  - Equals store.dispatch, but wrapped with setTimeout(() => {...}, 0)
  - By using this you can ensure anothter action in listener can be dispatched after the dispatching action is compeleted.
  - Note: when you set isContext: true, dispatch will not provided as parameter.

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.