Feat#51

README.md

@@ -13,7 +13,7 @@
 
 In 'redux-saga', to change the local state when an action is dispatched, it is necessary to change local state to globally using Redux, Context and etc. It becomes maintenance difficult if these kinds of works are repeated.
 
-To solve this problem I made 'redux-action-listener' by inheriting the work of [redux-listener](https://github.com/Gaya/redux-listeners). 
+To solve this problem I made 'redux-action-listener' by inheriting the work of [redux-listener](https://github.com/Gaya/redux-listeners).
 
 You can make side effects and listening actions more simply and lightly than 'redux-saga'. Also, by providing a hook version, you don't have to move local state to global state.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-action-listener",
-  "version": "1.2.7",
+  "version": "1.2.8-alpha.0",
   "description": "Middleware which allows listening actions of Context and Redux",
   "main": "lib",
   "files": [
@@ -23,8 +23,7 @@
     "test:c": "jest --coverage",
     "lint": "eslint --ext js,ts,jsx,tsx src test",
     "lint:p": "prettier --write \"{src,test}/**/*.{js,ts,jsx,tsx}\" \"**/*.md\"",
-    "prepublishOnly": "yarn test && yarn lint && yarn lint:p",
-    "prepare": "yarn build"
+    "prepublishOnly": "yarn test && yarn lint && yarn lint:p && yarn build"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [

src/react/useActionListener.tsx

@@ -29,7 +29,7 @@ const useActionListener: UseActionListener = (actionName, cb) => {
     return () => {
       actionHandler?.removeListener(hash);
     };
-  }, [actionName]);
+  }, [JSON.stringify(actionName)]);
 };
 
 export default useActionListener;

test/react/useActionListener.test.tsx

@@ -55,19 +55,86 @@ test('Should apply latest callback', () => {
   expect(listenMiddleware.listeners.size).toBe(1);
 });
 
-test('Should remove first listener when component unmounted', () => {
+test('Should remove first listener when action name is chagned and register new one', () => {
   const listenMiddleware = createMiddleware();
+  // it listens TEST actions
   const mockAction = 'TEST';
+  let cntForTest = 0;
+  let cntForOthers = 0;
   const { rerender } = renderHook(
-    ({ action }) => useActionListener(action, () => {}),
+    ({ action }) =>
+      useActionListener(action, () => {
+        if (action === 'TEST') {
+          cntForTest += 1;
+        } else {
+          cntForOthers += 1;
+        }
+      }),
     { initialProps: { action: mockAction } }
   );
 
   const middleware = listenMiddleware(mockStore)(mockNext);
   middleware({ type: 'TEST' });
   expect(listenMiddleware.listeners.size).toBe(1);
-  rerender({ action: 'OCCURS_UNMOUNT' });
+  expect(cntForTest).toBe(1);
+
+  // now action name is chagned
+  // it will remove listeneing listener that listens TEST
+  // and will create new listener for CHANGE_ACTION
+  rerender({ action: 'CHANGE_ACTION' });
   expect(listenMiddleware.listeners.size).toBe(1);
+  expect(cntForTest).toBe(1);
+  expect(cntForOthers).toBe(0);
+
+  // dispatch TEST
+  middleware({ type: 'TEST' });
+  // should be 1 because the action TEST is removed
+  expect(cntForTest).toBe(1);
+
+  middleware({ type: 'CHANGE_ACTION' });
+  // should be 1 because the CHANGE_ACTION is registed
+  expect(cntForTest).toBe(1);
+});
+
+test('Should remove first listener when action list is chagned and register new one', () => {
+  const listenMiddleware = createMiddleware();
+  // it listens [TEST] actions
+  const mockAction = ['TEST'];
+  let cntForTest = 0;
+  let cntForOthers = 0;
+  const { rerender } = renderHook(
+    ({ action }) =>
+      useActionListener(action, () => {
+        if (action[0] === 'TEST') {
+          cntForTest += 1;
+        } else {
+          cntForOthers += 1;
+        }
+      }),
+    { initialProps: { action: mockAction } }
+  );
+
+  const middleware = listenMiddleware(mockStore)(mockNext);
+  middleware({ type: 'TEST' });
+  expect(listenMiddleware.listeners.size).toBe(1);
+  expect(cntForTest).toBe(1);
+
+  // now action name is chagned
+  // it will remove listeneing listener that listens TEST
+  // and will create new listener for CHANGE_ACTION
+  rerender({ action: ['CHANGE_ACTION'] });
+  expect(listenMiddleware.listeners.size).toBe(1);
+  expect(cntForTest).toBe(1);
+  expect(cntForOthers).toBe(0);
+
+  // dispatch TEST
+  middleware({ type: 'TEST' });
+  // should be 1 because the action TEST is removed
+  expect(cntForTest).toBe(1);
+
+  middleware({ type: 'CHANGE_ACTION' });
+  // should be 1 because the CHANGE_ACTION is registed
+  expect(cntForTest).toBe(1);
 });
 
 test('Should register multiple listeners with same action name', () => {