https://github.com/vandycknick/use-redux
React hook utilities to access your state or dispatch actions from a redux store.
https://github.com/vandycknick/use-redux
hooks react redux typescript
Last synced: 3 months ago
JSON representation
React hook utilities to access your state or dispatch actions from a redux store.
- Host: GitHub
- URL: https://github.com/vandycknick/use-redux
- Owner: vandycknick
- License: mit
- Created: 2019-02-18T19:02:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:42:17.000Z (over 2 years ago)
- Last Synced: 2025-02-18T20:22:40.635Z (3 months ago)
- Topics: hooks, react, redux, typescript
- Language: TypeScript
- Homepage:
- Size: 565 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# useRedux
React hook utilities to access your state and dispatch actions from a redux store.
[![build status][azure-pipeline-badge]][azure-pipeline]
[![npm version][npm-version-badge]][npm-version]
[azure-pipeline]: https://dev.azure.com/vandycknick/use-redux/_build/latest?definitionId=8&branchName=master
[azure-pipeline-badge]: https://dev.azure.com/vandycknick/use-redux/_apis/build/status/nickvdyck.use-redux?branchName=master
[npm-version]: https://badge.fury.io/js/%40nvd%2Fuse-redux
[npm-version-badge]: https://badge.fury.io/js/%40nvd%2Fuse-redux.svg
## Installation
```sh
# Yarn
yarn add @nvd/use-redux
# NPM
npm i --save @nvd/use-redux
```
## Usage
> This utility depends on React Hooks which are available as of react version 16.8.0 and higher.
```tsx
import React from "react"
import { render } from "react-dom"
import { createStore } from "redux"
import { Provider, useDispatch } from "@nvd/use-redux"
const store = createStore(reducer)
// Use hook utilities to access current state and dispatch actions
const App = () => {
const dispatch = useDispatch()
const { counter } = useRedux()
const increment = () => dispatch({ type: "INCREMENT", payload: counter++ })
return (
Click {counter}
)
}
// Wrap you app in a provider function and pass a redux store as value
render(
,
document.getElementById('root'),
)
```
## API
### `Provider`
React component used to pass a store to any hook utility used in child components. This component is required in order for any of the hook utilities to work.
```tsx
const store = createStore({})
ReactDOM.render(
)
```
### `useSelector`
> <T, P>(selector: (state: T) => P) => P
Takes a selector function used to select and return a subset of the current redux state. The selector function will get invoked immediately after creation and after each store update.
```tsx
const TodoList = () => {
const todos = useSelector(state => state.todos.filter(todo => !todo.completed))
return (
{ todos.map(t => ) }
)
}
```
### `useActionCreators`
> <A extends Action, M extends ActionCreatorsMapObject<A>>(actionCreators: M) => M
Automatically bind a given map of action creators to the current stores dispatch function
```tsx
const App = () => {
const { incrementCounter } = useActionCreators(action)
return Click
}
```
### `useRedux`
> () => State
Returns the whole state tree from the current store
```tsx
const Count = () => {
const state = useRedux()
return
Current count: { state.counter }
}
```
### `useDispatch`
> () => Dispatch<AnyAction>
Returns dispatch function from the current store.
```tsx
const App = () => {
const dispatch = useDispatch()
return dispatch({ type: "INCREMENT" }))}>Click
}
```
## License
MIT