react-redux-hooks
v0.3.0
Published
The easiest way to connect redux. Power by react hooks
Downloads
177
Readme
react-redux-hooks
The easiest way to connect redux. Power by react hooks.
Getting Started
Install
npm install react-redux-hooks
or
yarn add react-redux-hooks
Usage
Connect to redux in component
Just use useRedux
. It would return state
and dispatch
import { useRedux } from 'react-redux-hooks';
const ToggleButton = () => {
const [state, dispatch] = useRedux();
return (
<button onClick={() => dispatch({ type: 'TOGGLE' })}>
{state.toggle ? 'Click to close' : 'Click to open'}
</button>
);
};
Top level Provider
Just pass redux store with Provider
like react-redux
.
import React from 'react';
import { createStore } from 'redux';
import { Provider, useRedux } from 'react-redux-hooks';
const store = createStore((state = { toggle: false }, action) => {
if (action.type === 'TOGGLE') {
return { toggle: !state.toggle };
}
return state;
});
ReactDOM.render(
<Provider store={store}>
<ToggleButton />
</Provider>,
document.getElementById('content'),
);
Advanced usage
Just like react-redux. We combine Selector, and actions creator in react-redux-hooks
function useRedux(mapStateToHook?, mapDispatchToHook?, options?)
useRedux accepts three different parameters, all optional. By convention, they are called:
- mapStateToHook?: Function
- mapDispatchToHook?: Function | Object
- options?: Object
Define mapStateToHook
Just like mapStateToProps.
mapStateToHook
should be defined as a function:
function mapStateToHook(state)
Arguments
state
is thestore.getState()
return value
Return
- Must return plain object
Example:
const mapStateToHook = (state) => state.toggle;
const [toggle, dispatch] = useRedux(mapStateToHook);
Define mapDispatchToHook
Just like mapDispatchToProps.
mapDispatchToHook
Could defined as the three types:
undefined
would returndispatch
on hook by defaultfunction
would passdispatch
as the function parameter for user customizeobject
would combine redux's bindActionCreators by default
Define mapDispatchToHook
as the undefined
Return dispatch
on hook by default.
Example:
const [, dispatch] = useRedux();
Define mapDispatchToHook
as the function
Pass dispatch
as the function parameter for user customize.
Example:
const mapDispatchToHook = (dispatch) => dispatch({ type: 'TOGGLE' });
const [, onToggle] = useRedux(undefined, mapDispatchToHook);
Define mapDispatchToHook
as the object
Combine redux's bindActionCreators by default
Example:
const onToggleAction = () => ({ type: 'TOGGLE' });
const mapDispatchToHook = { onToggle: onToggleAction };
const [, onToggle] = useRedux(undefined, mapDispatchToHook);
Define options
as the object
There are two options can be set:
{
pure?: boolean,
shouldHooksUpdate?: function
}
pure
: Whenpure
istrue
,useRedux
performs several equality checks that are used to avoid unnecessary calls to change state, and ultimately to render. It uses shallowEqual to compare state/prevState. Whenpure
isfalse
, update state everytime or update state onshouldHooksUpdate
returntrue
.shouldHooksUpdate: (nextState, prevState) => boolean
: You could customize update function. It only works onpure
isfalse
.
Roadmap
- [x] Shallow compare
- [x] Customize Selector
Discussion welcome to open issue
Release Notes
see CHANGELOG.md
Contribute
- Fork it.
- Create your feature-branch
git checkout -b your-new-feature-branch
- Commit your change
git commit -am 'Add new feature'
- Push to the branch
git push origin your-new-feature-branch
- Create new Pull Request with
master
branch
Commit Message Style
Please following angular format.
License
The MIT License (MIT)
Copyright (c) 2018 Lee < [email protected] >
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.