INIT & END

当使用 DuckRuntime#root() 修饰器后,关联React组件在mount/unmount时触发

import { INIT, END } from 'saga-duck'

function* saga(){
    yield take(INIT)
    // do something
    yield take(END)
    // do finalize
}

purify(FSC): DuckComponent

提供FSC的性能优化,更多可参考 进阶-FSC优化

import { purify } from 'saga-duck'
export default purify(function DuckComponent({ duck, store, dispatch }){ ... })

memorize( (duck, dispatch)=>Mixed ): (instance|Props)=>Mixed

提供仅基于duck与dispatch的持久化,用于固定例如回调等函数的实例,阻止重复渲染,优化性能。

更多可参考 进阶-其它通用的React优化

import { memorize } from 'saga-duck'
const getHandler = memorize((duck, dispatch) => ()=>dispatch(duck.creators.bar()) )

function Container(props){
    const handler = gethandler(props)
    return <Foo handler={handler} />
}

asResult(selector, yield select(selector))

因为generator过于灵活,以至于typescript对redux-saga的支持并不好,我们无法取得yield select(selector)正确的返回结果类型,这时可以使用asResult工具方法,它不做任何操作原样返回结果,供typescript正确识别返回类型。

import { asResult } from 'saga-duck'

function* saga(duck){
    const myState = asResult(duck.selector, yield select(duck.selector))
    // now myState is the type of duck.selector's return type
}

reduceFromPayload / createToPayload

通常情况下,saga-duck中的大部分reducers及actionCreators都是极其简单并雷同的

const options = {
    reducers: ({types}) => ({
        id: (state=0, action)=>{
            switch(action.type){
                case types.SET_ID:
                    return action.payload
                default:
                    return state
            }
        },
        ...
    }),
    creators: ({types}) => ({
        setId: (id)=>({ type: types.SET_ID, payload: id }),
        ...
    })
}

我们可以将它简化成这样

import { reduceFromPayload, createToPayload } from 'saga-duck'

const options = {
    reducers: ({types}) => ({
        id: reduceFromPayload(types.SET_ID, 0),
        ...
    }),
    creators: ({types}) => ({
        setId: createToPayload<number>(types.SET_ID),
        ...
    })

}

results matching ""

    No results matching ""