react-redux-hooks - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

@@ -5,2 +5,17 @@ # Change Log
 
+<a name="0.2.0"></a>
+# [0.2.0](https://github.com/jessy1092/react-redux-hooks/compare/v0.1.1...v0.2.0) (2019-01-09)
+
+
+### Bug Fixes
+
+* Set react and react-dom 16.7.0 as the peer dependencies ([0d90a45](https://github.com/jessy1092/react-redux-hooks/commit/0d90a45))
+
+
+### Features
+
+* Implement selector and bin actions method. issue [#3](https://github.com/jessy1092/react-redux-hooks/issues/3) ([bcf7e58](https://github.com/jessy1092/react-redux-hooks/commit/bcf7e58))
+
+
+
 <a name="0.1.1"></a>
@@ -7,0 +22,0 @@ ## [0.1.1](https://github.com/jessy1092/react-redux-hooks/compare/v0.1.0...v0.1.1) (2018-12-12)

dist-es/index.js

@@ -0,1 +1,2 @@
+import { bindActionCreators } from 'redux';
 import React, { createContext, useContext, useEffect, useState } from 'react';
@@ -10,3 +11,3 @@ export var ReduxContext = createContext({});
 };
-export var useRedux = function useRedux() {
+export var useReduxCore = function useReduxCore() {
   var context = useContext(ReduxContext);
@@ -26,2 +27,16 @@
   return [state, context.dispatch];
+};
+export var useRedux = function useRedux(selector, actions) {
+  var _useReduxCore = useReduxCore(),
+      state = _useReduxCore[0],
+      dispatch = _useReduxCore[1];
+
+  var selectedState = typeof selector !== 'function' ? state : selector(state);
+
+  if (typeof actions === 'undefined' || actions === null) {
+    return [selectedState, dispatch];
+  }
+
+  var boundActions = typeof actions === 'function' ? actions(dispatch) : bindActionCreators(actions, dispatch);
+  return [selectedState, boundActions];
 };

dist/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.useRedux = exports.Provider = exports.ReduxContext = void 0;
+exports.useRedux = exports.useReduxCore = exports.Provider = exports.ReduxContext = void 0;
 
+var _redux = require("redux");
+
 var _react = _interopRequireWildcard(require("react"));
@@ -23,3 +25,3 @@
 
-var useRedux = function useRedux() {
+var useReduxCore = function useReduxCore() {
   var context = (0, _react.useContext)(ReduxContext);
@@ -41,2 +43,19 @@
 
+exports.useReduxCore = useReduxCore;
+
+var useRedux = function useRedux(selector, actions) {
+  var _useReduxCore = useReduxCore(),
+      state = _useReduxCore[0],
+      dispatch = _useReduxCore[1];
+
+  var selectedState = typeof selector !== 'function' ? state : selector(state);
+
+  if (typeof actions === 'undefined' || actions === null) {
+    return [selectedState, dispatch];
+  }
+
+  var boundActions = typeof actions === 'function' ? actions(dispatch) : (0, _redux.bindActionCreators)(actions, dispatch);
+  return [selectedState, boundActions];
+};
+
 exports.useRedux = useRedux;

package.json

 {
   "name": "react-redux-hooks",
   "description": "The easiest way to connect redux. Power by react hooks",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "keywords": [
@@ -44,5 +44,6 @@ "react",
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": "^16.7.0-0",
-    "react-dom": "^16.7.0-0"
+    "react-dom": "^16.7.0-0",
+    "redux": "^4.0.1"
   },
@@ -85,2 +86,5 @@ "devDependencies": {
     "prettier": "^1.9.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0-0",
+    "react-dom": "^16.7.0-0",
     "react-hot-loader": "^3.1.3",
@@ -87,0 +91,0 @@ "react-test-renderer": "^16.7.0-0",

README.md

@@ -24,2 +24,4 @@ react-redux-hooks
 
+[See full examples](https://github.com/jessy1092/react-redux-hooks/tree/master/storybook/examples)
+
 #### Connect to redux in component
@@ -69,6 +71,79 @@
 
+### Advanced usage
+
+Just like [react-redux](https://react-redux.js.org). We combine Selector, and actions creator in react-redux-hooks
+
+
+#### Define `mapStateToHook`
+
+Just like [mapStateToProps](https://react-redux.js.org/using-react-redux/connect-mapstate).
+
+`mapStateToHook` should be defined as a function:
+
+```javascript
+function mapStateToHook(state)
+```
+
+Arguments
+- `state` is the `store.getState()` return value
+
+Return
+- Must return plain object
+
+Example:
+
+```javascript
+const mapStateToHook = (state) => state.toggle;
+
+const [toggle, dispatch] = useRedux(mapStateToHook);
+```
+
+#### Define `mapDispatchToHook`
+
+Just like [mapDispatchToProps](https://react-redux.js.org/using-react-redux/connect-mapdispatch).
+
+`mapDispatchToHook` Could defined as the three types:
+- `undefined` would return `dispatch` on hook by default
+- `function` would pass `dispatch` as the function parameter for user customize
+- `object` would combine [redux's bindActionCreators](https://redux.js.org/api/bindactioncreators) by default
+
+##### Define `mapDispatchToHook` as the `undefined`
+
+Return `dispatch` on hook by default.
+
+Example:
+```javascript
+const [, dispatch] = useRedux();
+```
+
+##### Define `mapDispatchToHook` as the `function`
+
+Pass `dispatch` as the function parameter for user customize.
+
+Example:
+```javascript
+const mapDispatchToHook = (dispatch) =>  dispatch({ type: 'TOGGLE' });
+
+const [, onToggle] = useRedux(undefined, mapDispatchToHook);
+```
+
+##### Define `mapDispatchToHook` as the `object`
+
+Combine [redux's bindActionCreators](https://redux.js.org/api/bindactioncreators) by default
+
+Example:
+```javascript
+const onToggleAction = () => ({ type: 'TOGGLE' });
+
+const mapDispatchToHook = { onToggle: onToggleAction };
+
+const [, onToggle] = useRedux(undefined, mapDispatchToHook);
+```
+
+[More example](https://github.com/jessy1092/react-redux-hooks/blob/master/storybook/examples/TodoList/containers/AddTodo.js)
+
 ## Roadmap
 
-- Shallow compare
-- Customize Selector
+- [ ] Shallow compare
+- [x] Customize Selector
 
@@ -92,2 +167,6 @@ Discussion welcome to [open issue](https://github.com/jessy1092/react-redux-hooks/issues)
 
+### Commit Message Style
+
+Please following [angular format](https://github.com/ajoslin/conventional-changelog/blob/master/conventions/angular.md).
+
 ## License
@@ -94,0 +173,0 @@

src/index.js

@@ -0,1 +1,2 @@
+import { bindActionCreators } from 'redux';
 import React, { createContext, useContext, useEffect, useState } from 'react';
@@ -9,3 +10,3 @@
 
-export const useRedux = () => {
+export const useReduxCore = () => {
 	const context = useContext(ReduxContext);
@@ -22,1 +23,15 @@ const [state, setState] = useState(context.getState());
 };
+
+export const useRedux = (selector, actions) => {
+	const [state, dispatch] = useReduxCore();
+	const selectedState = typeof selector !== 'function' ? state : selector(state);
+
+	if (typeof actions === 'undefined' || actions === null) {
+		return [selectedState, dispatch];
+	}
+
+	const boundActions =
+		typeof actions === 'function' ? actions(dispatch) : bindActionCreators(actions, dispatch);
+
+	return [selectedState, boundActions];
+};

storybook/config.js

 import { configure } from '@storybook/react';
 
-const req = require.context('./components/', true, /stories\.js$/);
+const req = require.context('./examples/', true, /stories\.js$/);
 
@@ -5,0 +5,0 @@ function loadStories() {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

367121

increased by2.54%

Number of package files

34

increased by47.83%

Lines of code

430

increased by98.16%

Number of lines in readme file

206

increased by62.2%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

48

increased by6.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@7.26.0(transitive)

• + Addedredux@4.2.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedreact@^16.7.0-0

• - Removedreact-dom@^16.7.0-0