> For the complete documentation index, see [llms.txt](https://cyrilluce.gitbook.io/saga-duck/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cyrilluce.gitbook.io/saga-duck/jin-jie.md).

# 进阶

### React模块化约定 - DuckComponent

saga-duck将Redux层面进行了模块化，而React也可以进行同步的模块化，与duck一一对应。

我们约定传递 { duck, store, dispatch } 给组件props，它们分别是

* duck 对应的duck实例，可以访问它的 types、selectors、creators等及其它自定义属性
* store 对应完整的Redux store状态，**但是不允许直接访问它，而是应通过duck.selector/duck.selectors访问**
* dispatch 对应Redux store的dispatch方法

这里将遵循此约定的组件称为DuckComponent，它可以非常方便地与duck结合起来进行复用。

### Functional Stateless Component性能优化 <a href="#fsc" id="fsc"></a>

当前React还未对纯函数组件进行优化，每次都会触发重新渲染。我们可以利用 [purify](https://cyrilluce.gitbooks.io/saga-duck/content/utils.html) 来进行简单优化

```
import { purify } from 'saga-duck'
export default purify(function MyComponent(props){
    return <div />
})
```

purify会提供props**浅对比**，如果一致则跳过（通过shouldComponentUpdate方法），同时如果判断为DuckComponent（props中同时有duck与store属性），则不会直接对store对比，而是对比duck.selector(store)。

当然，purify也可以用于非函数的React组件

```
export default purify(class MyComponent extends React.Component{
    render(){
        return <div />
    }
})
// 如果是typescript，还可以这样用
// @purify
// class MyComponent extends ...
```

### 动态函数优化 <a href="#optimize-memorize" id="optimize-memorize"></a>

可能你经常会写这样的代码

```
function Container({duck, store, dispatch}){
    return <Foo handler={()=>dispatch(duck.creators.bar())} />
}
```

也许你已经知道这种情况下的Foo组件只进行浅对比是无效的，因为handler在每次render时都传递一个新的函数。

对于这种**只和duck与dispatch相关**的函数，我们可以通过[memorize](https://cyrilluce.gitbooks.io/saga-duck/content/utils.html)来使它变为固定的引用

```
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} />
}
```

当然对于传统React组件也是适用的

```
class Container extends Component{
    render(){
        const handler = gethandler(this)
        return <Foo handler={handler} />
    }
}
```

### saga业务逻辑健状性 <a href="#saga-ye-wu-luo-ji-jian-zhuang-xing" id="saga-ye-wu-luo-ji-jian-zhuang-xing"></a>

redux-saga通常只要出错没有try...catch，都会导致退出中止，建议使用`redux-saga-catch`库的相关方法进行包装，避免一处错误影响整个业务。

```
import { takeEvery, takeLatest } from 'redux-saga-catch'
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cyrilluce.gitbook.io/saga-duck/jin-jie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.