Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Hydux + React = ❤️

License

NotificationsYou must be signed in to change notification settings

hydux/hydux-react

Repository files navigation

React renderer for hydux.

Install

yarn add hydux hydux-react# or npm i hydux hydux-react

Usage

import_appfrom'hydux'importwithPersistfrom'hydux/lib/enhancers/persist'importwithReact,{React}from'hydux-react'letapp=withReact()(_app)exportdefaultapp({init:()=>{count:1},actions:{down:()=>state=>({count:state.count-1}),up:()=>state=>({count:state.count+1})},view:(state:State,actions:Actions)=><div><h1>{state.count}</h1><buttononClick={actions.down}></button><buttononClick={actions.up}>+</button></div>})

Helpers

PureView

React.PureComponent helper, with which the component uses a shallow prop comparison to determine whether to re-render, which in turn prevents unnecessary re-rendering.

import{PureView}from'hydux-react'exportfunctionView(props){return(<PureViewstateInUse={props}> // The props passed to PureView would be shallow compared and determine whether diff and render child components.{(props)=><ChildComponent{...props}/>} // here we pass function as children to avoid executing child components' render function.</PureView>)}

ErrorBoundary

We can use the ErrorBoundary component to catch children's error, which requires aReact 16 feature.

import{ErrorBoundary}from'hydux-react'exportfunctionView(props){return(<ErrorBoundaryreport={(error,errorInfo)=>void}// Custom error handler functionrenderMessage={(error,errorInfo)=>React.ChildNode}// Custom error message renderer, default is `return null`>{()=><ChildComponent{...props}/>} // here we pass function as children to catch errors in child components' render function.</ErrorBoundary>)}

Counter App

git clone https://github.com/hydux/hydux-react.gitcd examples/counteryarn# or npm inpm start

Now openhttp://localhost:8080 and hack!

License

MIT


[8]ページ先頭

©2009-2025 Movatter.jp