- Notifications
You must be signed in to change notification settings - Fork7
A light-weight type-safe Elm-like alternative for Redux ecosystem, inspired by hyperapp and Elmish
License
hydux/hydux
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A light-weight Elm-like alternative for Redux ecosystem, inspired byHyperapp andElmish.
- Elm Architecture, split your whole app withinit,state,actions.
- hyperapp compatible API
- Elm-likeside effect manager and subscribe API
- Support any vdom library, including react (official support)
- Router (Recommended)
- Official support for react-router
- Hot reload (hmr)
- Server-Side Rendering(SSR)
- code splitting, seamlessly integrated with SSR.
- logger, persist,Redux Devtools with time traveling,ultradom(1kb vdom),**All in One**, easily setup all these fancy stuff without pain!
yarn add hydux# or npm i hyduxThis is an experimental dependency injection API for actions inspired by react-hooks, totally downward compatible, with this we don't need curring to inject state and actions or manually markup types for the return value any more!
yarn add hydux@^v0.5.8
import{inject}from'hydux'exportdefault{init:()=>({count:1}),actions:{down(){let{ state, actions, setState, Cmd}=inject<State,Actions>()setState({count:state.count-1})Cmd.addSub(_=>_.log('down -1'))actions.up()},up(){let{ state, actions}=inject<State,Actions>()return{count:state.count+1}},log(msg){console.log(msg)}},view:(state,actions)=>{return(<div><h1>{state.count}</h1><buttononclick={actions.down}>–</button><buttononclick={actions.up}>+</button></div>)}}
Let's say we got a counter, like this.
// Counter.jsexportdefault{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>}
Then we can compose it in Elm way, you can easily reuse your components.
import_appfrom'hydux'importwithUltradom,{h,React}from'hydux/lib/enhancers/ultradom-render'importCounterfrom'./counter'// use built-in 1kb ultradom to render the view.letapp=withUltradom()(_app)constactions={counter1:Counter.actions,counter2:Counter.actions,}conststate={counter1:Counter.init(),counter2:Counter.init(),}constview=(state:State,actions:Actions,)=><main><h1>Counter1:</h1>{Counter.view(state.counter1,actions.counter1)}<h1>Counter2:</h1>{Counter.view(state.counter2,actions.counter2)}</main>exportdefaultapp({init:()=>state, actions, view,})
You can init the state of your app via plain object, or with side effects, like fetch remote data.
import*asHyduxfrom'hydux'const{ Cmd}=Hyduxexportfunctioninit(){return{state:{// pojo statecount:1,},cmd:Cmd.ofSub(// update your state via side effects._=>fetch('https://your.server/init/count')// `_` is the real actions, don't confuse with the plain object `actions` that we created below, calling functions from plain object won't trigger state update!.then(res=>res.json()).then(count=>_.setCount(count)))}}exportconstactions={setCount:n=>(state,actions)=>{return{count:n}}}
If we want to init a child component with init command, we need to map it to the sub level via lambda function, just liketype lifting in Elm.
// App.tsximport{React}from'hydux-react'import*asHyduxfrom'hydux'import*asCounterfrom'Counter'constCmd=Hydux.Cmdexportconstinit=()=>{constcounter1=Counter.init()constcounter2=Counter.init()return{state:{counter1:counter1.state,counter2:counter2.state,},cmd:Cmd.batch(Cmd.map((_:Actions)=>_.counter1,counter1.cmd),// Map counter1's init command to parent componentCmd.map((_:Actions)=>_.counter2,counter2.cmd),// Map counter2's init command to parent componentCmd.ofSub(_=>// some other commands of App))}}exportconstactions={counter1:Counter.actions,counter2:Counter.actions,// ... other actions}exportconstview=(state:State,actions:Actions)=>(<main><h1>Counter1:</h1>{Counter.view(state.counter1,actions.counter1)}<h1>Counter2:</h1>{Counter.view(state.counter2,actions.counter2)}</main>)exporttypeActions=typeofactionsexporttypeState=ReturnType<typeofinit>['state']
This might be too much boilerplate code, but hey, we provide a type-friendly helper function! See:
// Combine all sub components's init/actions/views, auto map init commands.constsubComps=Hydux.combine({counter1:[Counter,Counter.init()],counter2:[Counter,Counter.init()],})exportconstinit2=()=>{return{state:{ ...subComps.state,// other state},cmd:Cmd.batch(subComps.cmd,// other commands)}}exportconstactions={ ...subComps.actions,// ... other actions}exportconstview=(state:State,actions:Actions)=>(<main><h1>Counter1:</h1>{subComps.render('counter1',state,actions)}// euqal to:// {subComps.views.counter1(state.counter1, actions.counter1)}// .render('<key>', ...) won't not work with custom views that not match `(state, actions) => any` or `(props) => any` signature// So we still need `.views.counter1(...args)` in this case.<h1>Counter2:</h1>{subComps.render('counter2',state,actions)}</main>)
This library also implemented a Elm-like side effects manager, you can simple return a record with state, cmd in your actione.g.
importapp,{Cmd}from'hydux'functionupLater(n){returnnewPromise(resolve=>setTimeout(()=>resolve(n+10),1000))}app({init:()=>({count:1}),actions:{down:()=>state=>({count:state.count-1}),up:()=>state=>({count:state.count+1}),upN:n=>state=>({count:state.count+n}),upLater:n=>(state,actions/* actions of same level */)=>({ state,// don't change the state, won't trigger view updatecmd:Cmd.ofPromise(upLater/* a function with single parameter and return a promise */,n/* the parameter of the funciton */,actions.upN/* success handler, optional */,console.error/* error handler, optional */)}),// Short hand of command onlyupLater2:n=>(state,actions/* actions of same level */)=>Cmd.ofPromise(upLater/* a function with single parameter and return a promise */,n/* the parameter of the funciton */,actions.upN/* success handler, optional */,console.error/* error handler, optional */),},view:()=>{/*...*/},})
In Elm, we can intercept child component's message in parent component, because child's update function is called in parent's update function. But how can we do this in hydux?
import*asassertfrom'assert'import*asHyduxfrom'../index'importCounterfrom'./counter'const{ Cmd}=Hyduxexportfunctioninit(){return{state:{counter1:Counter.init(),counter2:Counter.init(),}}}constactions={counter2:counter.actions,counter1:counter.actions}Hydux.overrideAction(actions,_=>_.counter1.upN,(n:number)=>(action,ps:State,// parent state (State)pa,// parent actions (Actions)// s: State['counter1'], // child state// a: Actions['counter1'], // child actions)=>{const{ state, cmd}=action(n+1)assert.equal(state.count,ps.counter1.count+n+1,'call child action work')return{ state,cmd:Cmd.batch(cmd,Cmd.ofFn(()=>pa.counter2.up()))}})typeState=ReturnType<typeofinit>['state']typeActions=typeofactionsletctx=Hydux.app<State,Actions>({init:()=>initState, actions,view:noop,onRender:noop})
- hydux-react: Hydux's react integration
- hydux-preact: Hydux'spreact integration
- hydux-react-router: Hydux's react-router integration
- hydux-mutator: A statically-typed immutable update help package, which also contains immutable collections.
- hydux-transitions: A css transition library inspired byanimajs's timeline, followThe Elm Architecture.
- hydux-data: Statically-typed data-driven development for hydux, in the Elm way. Inspired by apollo-client.
- hydux-pixi: High performancepixi.js renderer for Hydux.
- hydux code snippets for vscode (TS) Best practice for using hydux + typescript without boilerplate code.
- samples-antd: Admin sample in hydux.
git clone https://github.com/hydux/hydux.gitcd hyduxyarn# or npm icd examples/counteryarn# or npm inpm start
Now openhttp://localhost:8080 and hack!
After tryingFable +Elmish for several month, I need to write a small web App in my company, for many reasons I cannot choose some fancy stuff likeFable +Elmish, simply speaking, I need to use the mainstream JS stack but don't want to bear Redux's cumbersome, complex toolchain, etc anymore.
After some digging around, hyperapp looks really good to me, but I quickly find out it doesn't work with React, and many libraries don't work with the newest API. So I create this to supportdifferent vdom libraries, like React(official support),ultradom(built-in), Preact,inferno or what ever you want, just need to write a simple enhancer!
Also, to avoid breaking change, we havebuilt-in support for HMR, logger, persist,Redux Devtools, you know you want it!
MIT
About
A light-weight type-safe Elm-like alternative for Redux ecosystem, inspired by hyperapp and Elmish
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.