Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aduth/prsh
Preact Redux Simple Hooks
https://github.com/aduth/prsh
preact preact-hooks react-hooks redux
Last synced: 2 months ago
JSON representation
Preact Redux Simple Hooks
- Host: GitHub
- URL: https://github.com/aduth/prsh
- Owner: aduth
- License: mit
- Created: 2020-03-15T23:40:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-05T14:41:47.000Z (3 months ago)
- Last Synced: 2024-10-10T03:02:02.498Z (3 months ago)
- Topics: preact, preact-hooks, react-hooks, redux
- Language: JavaScript
- Size: 258 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
Preact Redux Simple Hooks
---
Preact Redux Simple Hooks (**prsh**) is a tiny implementation of a set of [Preact](https://preactjs.com) [Hooks](https://preactjs.com/guide/v10/hooks) for interacting with a [Redux](https://redux.js.org) store. In the spirit of Preact, it aims to be small and fast, weighing in at only **219 bytes** minified and gzipped ([95% smaller than `react-redux`](https://bundlephobia.com/[email protected])).
## Example
```jsx
import { createElement } from 'preact';
import { createStore } from 'redux';
import { StoreContext, useSelector, useStore } from 'prsh';
function counter( state = 0, action ) {
switch ( action.type ) {
case 'INCREMENT':
return state + 1;
}
return state;
}
const store = createStore( counter );
function CurrentCount() {
const count = useSelector( ( state ) => state );
return
Current value: { count };
}
function IncrementButton() {
const { dispatch } = useStore();
return (
dispatch( { type: 'INCREMENT' } ) }
>
Increment
);
}
function AppRoot() {
return (
);
}
render( , document.body );
```
CodePen: https://codepen.io/aduth/pen/QWbrLWe
## Installation
Using [npm](https://www.npmjs.com/):
```
npm install prsh
```
Or, download a pre-built copy from unpkg:
https://unpkg.com/prsh/dist/prsh.min.js
Or, start using in your browser without any download or build tools:
```html
import { StoreContext, useSelector } from 'https://unpkg.com/prsh?module';
// ...
```
## API
### `StoreContext`
The context object which passes a Redux store instance through a component tree.
A `StoreContext.Provider` should be rendered at the top-level of your application:
```jsx
function AppRoot() {
return (
);
}
```
You can also use this in combination with the [`useContext` hook](https://preactjs.com/guide/v10/hooks#context) to get direct access to the store.
```jsx
function ExampleComponent() {
const store = useContext( StoreContext );
// ...
}
```
### `useSelector`
A hook which, given a selector function, returns a value from state. The hook creates a subscription to the store and ensures that your component is rerendered whenever the value changes.
```jsx
function DoneTasks() {
const todos = useSelector( ( state ) => state.todos );
const doneTasks = todos.filter( ( todo ) => todo.done );
return
- { doneTasks.map( ( task ) =>
- { task.text } ) }
}
```
`useSelector` uses strict equality `===` to determine whether the component should update. Because of this, you should be careful to note:
- It is fine for a component to have multiple `useSelector` hooks in the same component. Avoid picking multiple parts of state into a single object or array return value, since an object or array will always be strictly unequal to the previous object or array (`{} !== {}`).
- You should ensure that your selector returns a stable value, ideally a direct reference to a state path. Deriving state using operations like [Array#filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) should be done separate from the selector result, since `filter` will _always produce a new array value_ and could cause your component to update more frequently than is necessary. If you need to memoize an expensive derivation, you can consider to use [`useMemo`](https://preactjs.com/guide/v10/hooks#usememo) separate from your selector result.
### `useStore`
A hook which returns access to the store of the current context, most commonly to dispatch to the store:
```jsx
function IncrementButton() {
const { dispatch } = useStore();
return (
dispatch( { type: 'INCREMENT' } ) }
>
Increment
);
}
```
This is simply a shorthand of `useContext( StoreContext );`.
## License
Copyright 2020 Andrew Duthie
Released under the [MIT License](./LICENSE.md).