https://github.com/hydux/hydux-react
Hydux + React = :heart:
https://github.com/hydux/hydux-react
elm elmish hydux hyperapp react redux
Last synced: 7 months ago
JSON representation
Hydux + React = :heart:
- Host: GitHub
- URL: https://github.com/hydux/hydux-react
- Owner: hydux
- License: mit
- Created: 2017-12-08T13:51:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-02T03:01:49.000Z (about 7 years ago)
- Last Synced: 2025-05-21T14:59:23.936Z (9 months ago)
- Topics: elm, elmish, hydux, hyperapp, react, redux
- Language: TypeScript
- Size: 1.09 MB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hydux-react
React renderer for hydux.
## Install
```sh
yarn add hydux hydux-react # or npm i hydux hydux-react
```
## Usage
```js
import _app from 'hydux'
import withPersist from 'hydux/lib/enhancers/persist'
import withReact, { React } from 'hydux-react'
let app = withReact()(_app)
export default app({
init: () => { count: 1 },
actions: {
down: () => state => ({ count: state.count - 1 }),
up: () => state => ({ count: state.count + 1 })
},
view: (state: State, actions: Actions) =>
{state.count}
–
+
})
```
## Helpers
### PureView
[React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) helper, with which the component uses a shallow prop comparison to determine whether to re-render, which in turn prevents unnecessary re-rendering.
```tsx
import { PureView } from 'hydux-react'
export function View(props) {
return (
// The props passed to PureView would be shallow compared and determine whether diff and render child components.
{(props) => } // here we pass function as children to avoid executing child components' render function.
)
}
```
## ErrorBoundary
We can use the ErrorBoundary component to catch children's error, which requires a [React 16 feature](https://reactjs.org/docs/error-boundaries.html).
```tsx
import { ErrorBoundary } from 'hydux-react'
export function View(props) {
return (
void} // Custom error handler function
renderMessage={(error, errorInfo) => React.ChildNode} // Custom error message renderer, default is `return null`
>
{() => } // here we pass function as children to catch errors in child components' render function.
)
}
```
## Counter App
```sh
git clone https://github.com/hydux/hydux-react.git
cd examples/counter
yarn # or npm i
npm start
```
Now open http://localhost:8080 and hack!
## License
MIT