// count.module.tsconstADD_COUNT=createAction<number>('ADD_COUNT')exportinterfaceCountDispatchProps{addOne:typeofADD_COUNT}exportinterfaceCountStateProps{count:number}// reducerexportconstreducer=handleActions({[`${ADD_COUNT}`]:(state:CountStateProps,{payload}:Action<number>)=>{return{...state,count:state.count+payload}}},{count:0})// own props which passed by parent componentsinterfaceÇountOwnProps{countToAdd:number}typeCountProps=CountStateProps&CountDispatchProps&CountOwnPropsclassCountComponentextendsReact.PureComponent<CountProps>{privateonClickAddCount=()=>{this.props.addCount(this.props.countToAdd)}render(){return(<div><buttononClick={this.onClickAddCount}>addcount</button>{this.props.count}</div>)}}// react actions dispatcherexportconstCount=connect(mapStateToProps,(dispatch)=>bindActionCreators({addCount:ADD_COUNT,}asCountDispatchProps,dispatch))(CountComponent)

// index.tsximport"reflect-metadata";importReactfrom"react";import{render}from"react-dom";import{useEffectModule}from"@sigi/react";import{initDevtool}from"@sigi/devtool";import{AppModule}from"./app.module";functionApp(){const[state,dispatcher]=useEffectModule(AppModule);constloading=state.loading?<div>loading</div> : null;constlist=(state.list||[]).map(value=><likey={value}>{value}</li>);return(<div><h1>HelloCodeSandbox</h1><buttononClick={dispatcher.fetchList}>fetchList</button><buttononClick={dispatcher.cancel}>cancel</button>{loading}<ul>{list}</ul></div>);}constrootElement=document.getElementById("app");render(<App/>,rootElement);initDevtool();import{Module,EffectModule,Reducer,Effect,Action}from"@sigi/core";import{Observable}from"rxjs";import{exhaustMap,takeUntil,map,tap,startWith,endWith}from"rxjs/operators";import{HttpClient}from"./http.service";interfaceAppState{loading:boolean;list:string[]|null;}@Module("App")exportclassAppModuleextendsEffectModule<AppState>{defaultState:AppState={list:null,loading:false};constructor(privatereadonlyhttpClient:HttpClient){super();}@Reducer()cancel(state:AppState){return{...state,...this.defaultState};}@Reducer()setLoading(state:AppState,loading:boolean){return{...state,loading};}@Reducer()setList(state:AppState,list:string[]){return{...state,list};}@Effect()fetchList(payload$:Observable<void>):Observable<Action>{returnpayload$.pipe(exhaustMap(()=>{returnthis.httpClient.get(`/resources`).pipe(tap(()=>{console.info("Got response");}),map(response=>this.getActions().setList(response)),startWith(this.getActions().setLoading(true)),endWith(this.getActions().setLoading(false)),takeUntil(this.getAction$().cancel));}));}}

@Reducer()addCount(state:State,payload:number){return{...state,count:state.count+payload}}

import{stub,useFakeTimers,SinonFakeTimers,SinonStub}from'sinon'import{Store}from'redux'import{noop}from'lodash'constfakeAjax={getJSON:noop}jest.mock('rxjs/ajax',()=>({ajax:fakeAjax}))import{configureStore}from'@demo/app/redux/store'import{GlobalState}from'@demo/app/redux'import{REQUESTED_USER_REPOS}from'./index'import{of,timer,throwError}from'rxjs'import{mapTo}from'rxjs/operators'describe('raw redux-observable specs',()=>{letstore:Store<GlobalState>letdispose:()=>voidletfakeTimer:SinonFakeTimersletajaxStub:SinonStubconstdebounce=300// debounce in epicbeforeEach(()=>{store=configureStore().storedispose=store.subscribe(noop)fakeTimer=useFakeTimers()ajaxStub=stub(fakeAjax,'getJSON')})afterEach(()=>{ajaxStub.restore()fakeTimer.restore()dispose()})it('should get empty repos by name',()=>{constusername='fake user name'ajaxStub.returns(of([]))store.dispatch(REQUESTED_USER_REPOS(username))fakeTimer.tick(debounce)expect(store.getState().raw.repos).toHaveLength(0)})it('should get repos by name',()=>{constusername='fake user name'constrepos=[{name:1},{name:2}]ajaxStub.returns(of(repos))store.dispatch(REQUESTED_USER_REPOS(username))fakeTimer.tick(debounce)expect(store.getState().raw.repos).toEqual(repos)})it('should set loading and finish loading',()=>{constusername='fake user name'constdelay=300ajaxStub.returns(timer(delay).pipe(mapTo([])))store.dispatch(REQUESTED_USER_REPOS(username))expect(store.getState().raw.loading).toBe(false)fakeTimer.tick(debounce)expect(store.getState().raw.loading).toBe(true)fakeTimer.tick(delay)expect(store.getState().raw.loading).toBe(false)})it('should catch error',()=>{constusername='fake user name'constdebounce=300// debounce in epicajaxStub.returns(throwError(newTypeError('whatever')))store.dispatch(REQUESTED_USER_REPOS(username))fakeTimer.tick(debounce)expect(store.getState().raw.error).toBe(true)})})import{Test,SigiTestModule,SigiTestStub}from'@sigi/testing'import{SinonFakeTimers,SinonStub,useFakeTimers,stub}from'sinon'import{of,timer,throwError}from'rxjs'import{mapTo}from'rxjs/operators'import{RepoService}from'./service'import{HooksModule,StateProps}from'./index'classFakeRepoService{getRepoByUsers=stub()}describe('ayanami specs',()=>{letfakeTimer:SinonFakeTimersletajaxStream$:letmoduleStub:SigiTestStub<AppModule,AppState>constdebounce=300// debounce in epicbeforeEach(()=>{fakeTimer=useFakeTimers()consttestModule=Test.createTestingModule({TestModule:SigiTestModule,}).overrideProvider(RepoService).useClass(FakeRepoService).compile()moduleStub=testModule.getTestingStub(HooksModule)constajaxStub=testModule.getInstance(RepoService).getRepoByUsersasSinonStub})afterEach(()=>{ajaxStub.reset()fakeTimer.restore()})it('should get empty repos by name',()=>{constusername='fake user name'ajaxStub.returns(of([]))moduleStub.dispatcher.fetchRepoByUser(username)fakeTimer.tick(debounce)expect(moduleStub.getState().repos).toHaveLength(0)})it('should get repos by name',()=>{constusername='fake user name'constrepos=[{name:1},{name:2}]ajaxStub.returns(of(repos))moduleStub.dispatcher.fetchRepoByUser(username)fakeTimer.tick(debounce)expect(moduleStub.getState().repos).toEqual(repos)})it('should set loading and finish loading',()=>{constusername='fake user name'constdelay=300ajaxStub.returns(timer(delay).pipe(mapTo([])))moduleStub.dispatcher.fetchRepoByUser(username)expect(moduleStub.getState().loading).toBe(false)fakeTimer.tick(debounce)expect(moduleStub.getState().loading).toBe(true)fakeTimer.tick(delay)expect(moduleStub.getState().loading).toBe(false)})it('should catch error',()=>{constusername='fake user name'constdebounce=300// debounce in epicajaxStub.returns(throwError(newTypeError('whatever')))moduleStub.dispatcher.fetchRepoByUser(username)fakeTimer.tick(debounce)expect(moduleStub.getState().error).toBe(true)})})

functionemitSSREffects<Context>(ctx:Context,modules:Constructor<EffectModule<unkown>>[])=>Promise<StateToPersist>

payloadGetter:(ctx:Context,skip:()=>typeofSKIP_SYMBOL)=>Payload|Promise<Payload>|typeofSKIP_SYMBOL

import{Module,EffectModule,ImmerReducer,TERMINATE_ACTION}from'@sigi/core'import{SSREffect}from'@sigi/ssr'import{Observable,of}from'rxjs'import{exhaustMap,map,startWith,delay,endWith,mergeMap}from'rxjs/operators'import{Draft}from'immer'importmd5from'md5'interfaceState{count:numbersigiMd5:string|null}@Module('demoModule')exportclassDemoModuleextendsEffectModule<State>{defaultState={count:0,sigiMd5:null,}@ImmerReducer()setCount(state:Draft<State>,count:number){state.count=count}@ImmerReducer()addOne(state:Draft<State>){state.count++}@ImmerReducer()setSigiMd5(state:Draft<State>,hashed:string){state.sigiMd5=hashed}@SSREffect({payloadGetter:()=>{returnmd5('sigi')},})getSigiMd5(payload$:Observable<string>){returnpayload$.pipe(delay(100),// mock asyncmergeMap((hashed)=>of(this.getActions().setSigiMd5(hashed),TERMINATE_ACTION)),)}@SSREffect()asyncEffect(payload$:Observable<void>){returnpayload$.pipe(exhaustMap(()=>of({count:10}).pipe(delay(1000),map(({count})=>this.getActions().setCount(count)),startWith(this.getActions().setCount(0)),endWith(TERMINATE_ACTION),),),)}}// renderer.tsximport'reflect-metadata'import{resolve}from'path'importfsfrom'fs'importReactfrom'react'import{renderToNodeStream}from'react-dom/server'importwebpackfrom'webpack'import{Request,Response}from'express'import{emitSSREffects}from'@sigi/ssr'import{SSRContext}from'@sigi/react'import{Home}from'@c/home'import{DemoModule}from'@c/module'exportasyncfunctionrenderer(req:Request,res:Response){conststate=awaitemitSSREffects(req,[DemoModule])conststats:webpack.Stats.ToJsonOutput=JSON.parse(fs.readFileSync(resolve(__dirname,'../client/output-stats.json'),{encoding:'utf8'}),)constscripts=(stats.assets||[]).map((asset)=><scriptkey={asset.name}src={`/${asset.name}`}/>)consthtml=renderToNodeStream(<html><head><metacharSet="UTF-8"/><metalang="zh-cms-hans"/><title>Sigissrexample</title></head><body><divid="app"><SSRContext.Providervalue={req}><Home/></SSRContext.Provider></div>{state.renderToJSX()}{scripts}</body></html>,)res.status(200)html.pipe(res)}

@Module('A')exportclassModuleAextendsEffectModule<AState>{@SSREffect({skipFirstClientDispatch:true,payloadGetter:(req:Request)=>{returnrequire('md5')('hello')},})whatever(payload$:Observable<string>){returnpayload$.pipe(map(()=>this.createNoopAction()))}}↓↓↓↓↓↓// TypeScript after transform:import{EffectModule,Module}from'@sigi/core';import{SSREffect}from'@sigi/ssr';import{Request}from'express';import{Observable}from'rxjs';import{map}from'rxjs/operators';interfaceAState{}@Module('A')exportclassModuleAextendsEffectModule<AState>{@SSREffect({})whatever(payload$:Observable<string>){returnpayload$.pipe(map(()=>this.createNoopAction()));}}

import"@abraham/reflection";importReactfrom"react";import{render}from"react-dom";import{ClassProvider}from"@sigi/di";import{useEffectModule,InjectionProvidersContext}from"@sigi/react";import{HttpErrorClient}from"./http-with-error.service";import{HttpBetterClient}from"./http-better.service";import{AppModule}from"./app.module";constAppContainer=React.memo(({appTitle}:{appTitle:string})=>{const[list,dispatcher]=useEffectModule(AppModule,{selector:state=>state.list});constloading=!list?<div>loading</div> : null;consttitle=listinstanceofError?<h1>{list.message}</h1> : <h1>{appTitle}</h1>;constlistNodes=Array.isArray(list)?list.map(value=><likey={value}>{value}</li>):null;return(<div>{title}<buttononClick={dispatcher.fetchList}>fetchList</button><buttononClick={dispatcher.cancel}>cancel</button>{loading}<ul>{listNodes}</ul></div>);});functionApp(){constbetterHttpProvider:ClassProvider<HttpErrorClient>={provide:HttpErrorClient,useClass:HttpBetterClient};return(<><AppContainerappTitle="Always error"/><InjectionProvidersContextproviders={[betterHttpProvider]}><AppContainerappTitle="Better http client"/></InjectionProvidersContext></>);}constrootElement=document.getElementById("app");render(<App/>,rootElement);