react-redux-hooks
Advanced tools
Comparing version 0.1.1 to 0.2.0
@@ -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) |
@@ -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]; | ||
}; |
"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; |
{ | ||
"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", |
@@ -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 @@ |
@@ -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]; | ||
}; |
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() { |
License Policy Violation
LicenseThis 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 riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
367121
34
430
206
3
48
1
+ 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