redux-simplify-hooks 1.0.0 → 1.0.2

package/LICENSE

@@ -1,17 +1,17 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-Copyright 2025 Mbulelo Phillip Peyi
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+Copyright 2025 Mbulelo Phillip Peyi
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -1,147 +1,143 @@
-Excellent — let’s write a **professional `README.md`** for your package `redux-simplify-hooks`:
-
----
-
-````markdown
-# redux-simplify-hooks
-
-> Redux made simple: modern, type-safe React hooks for deeply nested state, actions, and selectors — fully compatible with Redux Toolkit and React 16.8+.
-
-[![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](LICENSE)
-
----
-
-## ✨ What is redux-simplify-hooks?
-
-**redux-simplify-hooks** is a lightweight collection of hooks that simplifies working with Redux state in React.  
-It provides ergonomic and modern alternatives to `useSelector` and `useDispatch`, allowing you to:
-
-- Select deeply nested state using dot notation.
-- Read and write Redux state like React’s `useState()`.
-- Bind Redux actions easily with hooks.
-- Select multiple state slices at once.
-
-✅ Fully type-safe  
-✅ Compatible with **React 16.8+** (Hooks onward)  
-✅ Compatible with **Redux Toolkit**  
-✅ Supports React 17, 18, 19+  
-
----
-
-## 📦 Installation
-
-First install the required peer dependencies if not already installed:
-
-```bash
-npm install react react-dom react-redux @reduxjs/toolkit
-````
-
-Then install redux-simplify-hooks:
-
-```bash
-npm install redux-simplify-hooks
-```
-
----
-
-## ⚙ Peer Dependencies
-
-| Package          | Version                |
-| ---------------- | ---------------------- |
-| react            | >= 16.8                |
-| react-dom        | >= 16.8                |
-| react-redux      | ^7.1.0, ^8.0.0, ^9.0.0 |
-| @reduxjs/toolkit | >= 1.0.0               |
-
----
-
-## 🚀 Usage
-
-### 1️⃣ `useRedux()`
-
-Read nested state using dot-path notation:
-
-```typescript
-import { useRedux } from 'redux-simplify-hooks';
-
-const MyComponent = () => {
-  const { state, dispatch } = useRedux('user.profile.name');
-
-  return <div>Hello, {state}</div>;
-};
-```
-
-### 2️⃣ `useReduxMulti()`
-
-Select multiple state paths at once:
-
-```typescript
-import { useReduxMulti } from 'redux-simplify-hooks';
-
-const { state } = useReduxMulti(['user.profile.name', 'counter.value']);
-
-console.log(state['user.profile.name']);
-console.log(state['counter.value']);
-```
-
-### 3️⃣ `useReduxState()`
-
-Read & write Redux state like React's `useState`:
-
-```typescript
-import { useReduxState } from 'redux-simplify-hooks';
-import { counterSlice } from './counterSlice';
-
-const [count, setCount] = useReduxState('counter.value', counterSlice.actions.setCounter);
-
-setCount(42);
-```
-
-### 4️⃣ `useBoundAction()`
-
-Bind Redux actions to dispatch automatically:
-
-```typescript
-import { useBoundAction } from 'redux-simplify-hooks';
-import { counterSlice } from './counterSlice';
-
-const incrementByAmount = useBoundAction(counterSlice.actions.incrementByAmount);
-
-incrementByAmount(5); // dispatches action
-```
-
----
-
-## 🧪 Testing
-
-redux-simplify-hooks is fully tested using:
-
-* Jest
-* @testing-library/react
-
-```bash
-npm run test
-```
-
----
-
-## 📄 License
-
-This project is licensed under the **Apache License 2.0**.
-
-© 2025 Mbulelo Phillip Peyi
-
----
-
-## 💡 Motivation
-
-Redux can be powerful but verbose — **redux-simplify-hooks** aims to make Redux feel as simple as React's `useState()` without sacrificing its robustness.
-
----
-
-## 💬 Contributions
-
-PRs and issues are welcome! If you want to contribute, please fork and submit a pull request.
-
----
-
+````markdown
+# redux-simplify-hooks
+
+> Redux made simple: modern, type-safe React hooks for deeply nested state, actions, and selectors — fully compatible with Redux Toolkit and React 16.8+.
+
+[![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](LICENSE)
+
+---
+
+## What is redux-simplify-hooks?
+
+**redux-simplify-hooks** is a lightweight collection of hooks that simplifies working with Redux state in React.  
+It provides ergonomic and modern alternatives to `useSelector` and `useDispatch`, allowing you to:
+
+- Select deeply nested state using dot notation.
+- Read and write Redux state like React’s `useState()`.
+- Bind Redux actions easily with hooks.
+- Select multiple state slices at once.
+
+Fully type-safe  
+Compatible with **React 16.8+** (Hooks onward)  
+Compatible with **Redux Toolkit**  
+Supports React 17, 18, 19+  
+
+---
+
+## Installation
+
+First install the required peer dependencies if not already installed:
+
+```bash
+npm install react react-dom react-redux @reduxjs/toolkit
+````
+
+Then install redux-simplify-hooks:
+
+```bash
+npm install redux-simplify-hooks
+```
+
+---
+
+## ⚙ Peer Dependencies
+
+| Package          | Version                |
+| ---------------- | ---------------------- |
+| react            | >= 16.8                |
+| react-dom        | >= 16.8                |
+| react-redux      | ^7.1.0, ^8.0.0, ^9.0.0 |
+| @reduxjs/toolkit | >= 1.0.0               |
+
+---
+
+## Usage
+
+### 1 `useRedux()`
+
+Read nested state using dot-path notation:
+
+```typescript
+import { useRedux } from 'redux-simplify-hooks';
+
+const MyComponent = () => {
+  const { state, dispatch } = useRedux('user.profile.name');
+
+  return <div>Hello, {state}</div>;
+};
+```
+
+### 2 `useReduxMulti()`
+
+Select multiple state paths at once:
+
+```typescript
+import { useReduxMulti } from 'redux-simplify-hooks';
+
+const { state } = useReduxMulti(['user.profile.name', 'counter.value']);
+
+console.log(state['user.profile.name']);
+console.log(state['counter.value']);
+```
+
+### 3 `useReduxState()`
+
+Read & write Redux state like React's `useState`:
+
+```typescript
+import { useReduxState } from 'redux-simplify-hooks';
+import { counterSlice } from './counterSlice';
+
+const [count, setCount] = useReduxState('counter.value', counterSlice.actions.setCounter);
+
+setCount(42);
+```
+
+### 4 `useBoundAction()`
+
+Bind Redux actions to dispatch automatically:
+
+```typescript
+import { useBoundAction } from 'redux-simplify-hooks';
+import { counterSlice } from './counterSlice';
+
+const incrementByAmount = useBoundAction(counterSlice.actions.incrementByAmount);
+
+incrementByAmount(5); // dispatches action
+```
+
+---
+
+## Testing
+
+redux-simplify-hooks is fully tested using:
+
+* Jest
+* @testing-library/react
+
+```bash
+npm run test
+```
+
+---
+
+## License
+
+This project is licensed under the **Apache License 2.0**.
+
+© 2025 Mbulelo Phillip Peyi
+
+---
+
+## Motivation
+
+Redux can be powerful but verbose — **redux-simplify-hooks** aims to make Redux feel as simple as React's `useState()` without sacrificing its robustness.
+
+---
+
+## Contributions
+
+PRs and issues are welcome! If you want to contribute, please fork and submit a pull request.
+
+---
+

package/dist/src/hooks/useBoundAction.d.ts

@@ -1,3 +1,2 @@
-import { AnyAction } from 'redux';
-export declare function useBoundAction<Args extends any[]>(actionCreator: (...args: Args) => AnyAction): (...args: Args) => void;
+export declare function useBoundAction<Args extends any[]>(actionCreator: (...args: Args) => any): (...args: Args) => any;
 //# sourceMappingURL=useBoundAction.d.ts.map

package/dist/src/hooks/useBoundAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBoundAction.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBoundAction.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,wBAAgB,cAAc,CAAC,IAAI,SAAS,GAAG,EAAE,EAAE,aAAa,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,SAAS,aAG/D,IAAI,UAGlC"}
+{"version":3,"file":"useBoundAction.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBoundAction.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,IAAI,SAAS,GAAG,EAAE,EAC/C,aAAa,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,GAAG,aAIR,IAAI,SAGlC"}

package/dist/src/hooks/useBoundAction.js

@@ -1,8 +1,8 @@
-import { useDispatch } from 'react-redux';
-import { useCallback } from 'react';
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
 export function useBoundAction(actionCreator) {
     const dispatch = useDispatch();
     return useCallback((...args) => {
-        dispatch(actionCreator(...args));
+        return dispatch(actionCreator(...args));
     }, [dispatch, actionCreator]);
 }

package/dist/src/hooks/useRedux.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRedux.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRedux.ts"],"names":[],"mappings":"AAIA,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,CAAC;WAgBnC,CAAC;;EACnC"}
+{"version":3,"file":"useRedux.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRedux.ts"],"names":[],"mappings":"AAIA,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,CAAC;WAe3C,CAAC;;EAC3B"}

package/dist/src/hooks/useRedux.js

@@ -1,18 +1,19 @@
-import { useSelector, useDispatch } from 'react-redux';
-import { useMemo } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { useMemo, useRef } from 'react';
 import { getNestedValue } from '../utils/getNestedValue';
 export function useRedux(statePath, defaultValue) {
     const dispatch = useDispatch();
+    // Store defaultValue in a ref so changes to object literals don't break memoization
+    const defaultRef = useRef(defaultValue);
+    defaultRef.current = defaultValue;
     const selector = useMemo(() => {
         return (state) => {
-            if (!statePath) {
-                // If no path specified, don't return full state — return defaultValue instead
-                return defaultValue;
-            }
+            if (!statePath)
+                return defaultRef.current;
             const val = getNestedValue(state, statePath);
-            return val !== undefined ? val : defaultValue;
+            return val !== undefined ? val : defaultRef.current;
         };
-    }, [statePath, defaultValue]);
-    const selectedState = useSelector(selector);
-    return { state: selectedState, dispatch };
+    }, [statePath]); // Removed defaultValue from deps to keep selector stable
+    const state = useSelector(selector, shallowEqual);
+    return { state: state, dispatch };
 }

package/dist/src/hooks/useReduxMulti.d.ts

@@ -1,5 +1,5 @@
 export declare function useReduxMulti(paths?: string[]): {
-    state: any;
+    state: Record<string, any>;
     dispatch: import("redux").Dispatch<import("redux").UnknownAction>;
 };
 //# sourceMappingURL=useReduxMulti.d.ts.map

package/dist/src/hooks/useReduxMulti.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReduxMulti.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReduxMulti.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,KAAK,GAAE,MAAM,EAAO;;;EAWjD"}
+{"version":3,"file":"useReduxMulti.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReduxMulti.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,CAAC,KAAK,GAAE,MAAM,EAAO;;;EAmBjD"}

package/dist/src/hooks/useReduxMulti.js

@@ -1,10 +1,22 @@
-import { useRedux } from './useRedux';
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { getNestedValue } from "../utils/getNestedValue";
+import { shallowEqual } from "react-redux";
 export function useReduxMulti(paths = []) {
-    const dispatch = useRedux().dispatch;
-    const states = paths.map(path => {
-        const { state } = useRedux(path);
-        return [path, state];
+    const dispatch = useDispatch();
+    // Memoize the path string to keep the selector identity stable
+    const pathsKey = paths.join(',');
+    const state = useSelector((rootState) => {
+        return paths.reduce((acc, path) => {
+            acc[path] = getNestedValue(rootState, path);
+            return acc;
+        }, {});
+    }, (prev, next) => {
+        // Faster than JSON.stringify, safer than default ref check
+        const keys = Object.keys(next);
+        if (keys.length !== Object.keys(prev).length)
+            return false;
+        return keys.every(key => shallowEqual(prev[key], next[key]));
     });
-    const state = Object.fromEntries(states);
     return { state, dispatch };
 }

package/dist/src/hooks/useReduxState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReduxState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReduxState.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,CAAC,EAC7B,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,EAChC,YAAY,CAAC,EAAE,CAAC,GACf,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAY5C"}
+{"version":3,"file":"useReduxState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReduxState.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,CAAC,EAC7B,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,EAChC,YAAY,CAAC,EAAE,CAAC,GACf,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAe5C"}

package/dist/src/hooks/useReduxState.js

@@ -1,11 +1,15 @@
-import { useRedux } from './useRedux';
+import { useCallback, useRef } from "react";
+import { useRedux } from "./useRedux";
 export function useReduxState(statePath, actionCreator, defaultValue) {
     const { state, dispatch } = useRedux(statePath, defaultValue);
-    const setState = (newValue) => {
+    // Keep track of the latest state in a ref to avoid stale closures in useCallback
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const setState = useCallback((newValue) => {
         const valueToDispatch = typeof newValue === 'function'
-            ? newValue(state)
+            ? newValue(stateRef.current)
             : newValue;
         dispatch(actionCreator(valueToDispatch));
-    };
+    }, [dispatch, actionCreator]); // state is removed from deps; setState is now stable!
     return [state, setState];
 }

package/dist/src/utils/getNestedValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getNestedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/getNestedValue.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,CAc1D"}
+{"version":3,"file":"getNestedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/getNestedValue.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,CAQ1D"}

package/dist/src/utils/getNestedValue.js

@@ -1,14 +1,11 @@
 export function getNestedValue(obj, path) {
     if (!path)
         return obj;
-    return path.split('.').reduce((acc, key) => {
+    const keys = path.split(/[.[\]]+/).filter(Boolean);
+    return keys.reduce((acc, key) => {
         if (acc === undefined || acc === null)
             return undefined;
-        const arrayMatch = key.match(/^(\w+)\[(\d+)\]$/);
-        if (arrayMatch) {
-            const [, arrKey, index] = arrayMatch;
-            return acc[arrKey]?.[Number(index)];
-        }
-        return acc?.[key];
+        const isIndex = /^\d+$/.test(key);
+        return isIndex ? acc[Number(key)] : acc[key];
     }, obj);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-simplify-hooks",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Redux made simple: modern, type-safe React hooks for deeply nested state, actions, and selectors — fully compatible with Redux Toolkit and React 16.8+.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",