https://github.com/paramsinghvc/redux-hooks
A lightweight React hook for using Redux
https://github.com/paramsinghvc/redux-hooks
hooks javascript react redux typescript webpack
Last synced: 3 months ago
JSON representation
A lightweight React hook for using Redux
- Host: GitHub
- URL: https://github.com/paramsinghvc/redux-hooks
- Owner: paramsinghvc
- License: mit
- Created: 2019-05-18T13:30:44.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:35:51.000Z (over 3 years ago)
- Last Synced: 2025-02-11T02:18:03.783Z (over 1 year ago)
- Topics: hooks, javascript, react, redux, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 739 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Build Status][build-shield]]()
[![MIT License][license-shield]][license-url]
[![Contributors][contributors-shield]]()
[![LinkedIn][linkedin-shield]][linkedin-url]
useRedux React Hook
Making redux easy to use with React Hooks Api
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
.
NPM Link
## Table of Contents
- [About the Project](#about-the-project)
- [Built With](#built-with)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
- [Acknowledgements](#acknowledgements)
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://example.com)
[React Hooks Api](https://reactjs.org/docs/hooks-intro.html) has introduced a cleaner and easy way of writing React Components ever. But using Redux in hooks way is not there. Hence, useRedux is a way of using Redux in the hooks way. It's a sort of connect function using hooks api.
### Built With
- [TypeScript](https://www.typescriptlang.org/)
- [Webpack](https://webpack.js.org/)
## Getting Started
### Prerequisites
Following Peer Dependencies are required for using redux-hooks package:
- react: "^16.8.6",
- redux: "^4.0.1"
### Installation
```sh
npm i @mollycule/redux-hook -S
```
## Usage
1. Wrap the root app component with `redux-hook` provider by calling `createStoreContext` while specifying the shape of Redux App RootState into Generic Parameter.
```tsx
import { createStoreContext } from "@mollycule/redux-hook";
const { Provider } = createStoreContext();
class App extends Component {
render() {
return (
);
}
}
export default App;
```
2. Now, we can simply use the `useRedux` hook anywhere in our app functional components as
```tsx
import useRedux from "@mollycule/redux-hook";
import { incrementCount, decrementCount, setIsLoading } from "./actions";
const MyComponent = props => {
const mapStateToProps = state => ({
count: state.count,
isLoading: state.isLoading
});
const mapDispatchToProps = {
incrementCount,
decrementCount,
setIsLoading
};
const mappedProps = useRedux(mapStateToProps, mapDispatchToProps);
const { count, incrementCounter, setIsLoading } = mappedProps;
return (
setIsLoading(true)}>
{count}
);
};
```
**Note**: For `mapDispatchToProps`, we can pass a normal function as well that accepts dispatch and returns an object of dispatch bound actions from it as
```ts
const mapDispatchToProps = dispatch => ({
authenticateUser: () => {
dispatch({
type: "AUTHENTICATE_USER"
});
},
setIsLoading: (status: boolean) => {
dispatch(setIsLoading(status));
}
});
```
Passing simply an object of actions, automatically bind them to dispatch using redux [`bindActionCreators`](https://redux.js.org/api/bindactioncreators). Also, you can even skip the second paramter of useRedux hook if you just want to access the props from the store.
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Param Singh - [@paramsinghvc](https://github.com/paramsinghvc) - paramsinghvc@gmail.com
Project Link: [https://github.com/paramsinghvc/redux-hooks](https://github.com/paramsinghvc/redux-hooks)
## Acknowledgements
- [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
- [Img Shields](https://shields.io)
[build-shield]: https://img.shields.io/badge/build-passing-brightgreen.svg?style=flat
[contributors-shield]: https://img.shields.io/badge/contributors-1-orange.svg?style=flat
[license-shield]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: https://choosealicense.com/licenses/mit
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat&logo=linkedin&colorB=0077B5
[linkedin-url]: https://www.linkedin.com/in/paramsinghvc
[product-screenshot]: https://user-images.githubusercontent.com/4329912/57970750-b895d200-79a2-11e9-9fdf-fcf80c8fce28.png