- Notifications
You must be signed in to change notification settings - Fork1
hydux/hydux-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React renderer for hydux.
yarn add hydux hydux-react# or npm i hydux hydux-reactimport_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>})
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>)}
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>)}
git clone https://github.com/hydux/hydux-react.gitcd examples/counteryarn# or npm inpm start
Now openhttp://localhost:8080 and hack!
MIT