正文

请到「今天看啥」查看全文

Try it!

// index.tsx
import "reflect-metadata";
import React from "react";
import { render } from "react-dom";
import { useEffectModule } from "@sigi/react";
import { initDevtool } from "@sigi/devtool";

import { AppModule } from "./app.module";

function App() {
    const [state, dispatcher] = useEffectModule(AppModule);

    const loading = state.loading ? 
loading</div> : null;

    const list = (state.list || []).map(value => 
{value}li>);
    return (
    

        
Hello CodeSandbox</h1>
        fetchListbutton>
        cancel</button>
        {loading}
        
{list}l>
    </div>
    );
}

const rootElement = document.getElementById("app");
render(>, 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";

interface AppState {
    loading: boolean;
    list: string[] | null;
}

@Module("App")
export class AppModule extends EffectModule {
    defaultState: AppState = {
    list: null,
    loading: false
    };

    constructor(private readonly httpClient: 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 {
    return payload$.pipe(
        exhaustMap(() => {
        return this.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)
        );
        })
    );
    }
}
在这个代码示例中，组件中的 diaptcher.fetchList 可以直接跳转到 EffectModule 的 fetchList 实现，并且类型签名是自动互相匹配的。比如声明这样一个 Reducer:
@Reducer()
addCount(state: State, payload: number) {
    return { ...state, count: state.count + payload }
}
它对应的 dispatcher.addCount 签名就是 (payload: number) => void，在你不小心传入错误类型的 payload 之后，TypeScript 会直接告诉你错误的原因。在 Sigi 的 EffectModule 中，Effect 和 ImmerReducer 也有同样的效果。
分形
Sigi 没有全局 Store 的概念，它在全局唯一的限制是每一个 EffectModule 的名字必须不一样，这样做是为了更方便的在 devtool 中追踪异步事件的流程，以及方便 SSR 场景下将数据从 Node 透传到前端。
所以在实践中，你可以大量依赖 Sigi 去抽象带复杂业务逻辑的业务组件，将各种复杂的状态封装到局部。而对外暴露的 API 就仅仅是一个普通的 React 组件。
测试
Sigi 底层有一个小巧的 Denpendencies injection 实现，所以使用 Sigi 的时候推荐将大部分复杂的业务通过 Class 组织起来，然后通过 DI 组合它们。这样做有几个好处，其中最重要的部分就体现在测试的便捷性上。
下面两个代码片段展示了有 DI 和没有 DI 的时候在编写测试上的区别:
import { stub, useFakeTimers, SinonFakeTimers, SinonStub } from 'sinon'
import { Store } from 'redux'
import { noop } from 'lodash'
const fakeAjax = {
    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', () => {
    let store: Store
    let dispose: () => void
    let fakeTimer: SinonFakeTimers
    let ajaxStub: SinonStub
    const debounce = 300 // debounce in epic

    beforeEach(() => {
    store = configureStore().store
    dispose = store.subscribe(noop)
    fakeTimer = useFakeTimers()
    ajaxStub = stub(fakeAjax, 'getJSON')
    })

    afterEach(() => {
    ajaxStub.restore()
    fakeTimer.restore()
    dispose()
    })

    it('should get empty repos by name', () => {
    const username = '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', () => {
    const username = 'fake user name'
    const repos = [{ 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', () => {
    const username = 'fake user name'
    const delay = 300

请到「今天看啥」查看全文