Utils

useDuck

使用hook的方式快速在组件中使用Duck

import { useDuck, Duck } from 'saga-duck'

function MyComponent(){
    const { duck, store, dispatch } = useDuck(Counter)
    const { selector, creators } = duck
    return <>
        Clicked: {selector(store).count} times
        <button onClick={() => dispatch(creators.increment())}>+</button>
    </>
}

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

对于React16+，使用useMemo替代

提供仅基于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(k){
    const myState = asResult(this.selector, yield select(this.selector))
    // now myState is the type of duck.selector's return type
}

在经过实践后，不再推荐使用（尽管它是redux-saga官方的推荐写法），而是直接用下面的方式，能直接取得类型信息

const myState = this.selector(yield select())

reduceFromPayload / createToPayload

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

let reducer = (state=0, action): number=>{
  switch(action.type){
    case types.SET_ID:
      return action.payload
    default:
      return state
  }
}
let creator = (id: number)=>({ type: types.SET_ID, payload: id })

我们可以将它简化成这样

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

let reducer = reduceFromPayload(types.SET_ID, 0)
let creator = createToPayload<number>(types.SET_ID)