Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
awmleer committed Nov 6, 2019
1 parent 10334f3 commit 68197a4
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 0 deletions.
30 changes: 30 additions & 0 deletions docs/third-party-libraries.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,36 @@ If you are familiar with vue's `computed` feature, `useMemo` can help you to sol

[useAsyncMemo](https://github.com/awmleer/use-async-memo) is very suitable for handling asynchronous computed data, for example, fetching paginated data or calling search API when input changes.

## withWrapper

If you create a `Provider` in one component, then you can't get the Store instance with `useStore` in this component:

```jsx
const App = function() {
const fooStore = useStore(FooStore) // You can't get the FooStore instance here
return (
<Provider of={FooStore}>
<p>Hello.</p>
</Provider>
)
}
```

To solve this problem, you can use [withWrapper](https://github.com/awmleer/with-wrapper):

```jsx
const App = withWrapper(element => (
<Provider of={FooStore}>
{element}
</Provider>
))(function() {
const fooStore = useStore(FooStore) // Now you can get the FooStore instance
return (
<p>Hello.</p>
)
})
```

## immer

[immer](https://github.com/immerjs/immer) is a tiny package that allows you to work with immutable state in a more convenient way. You can see [here](https://github.com/immerjs/immer#reactsetstate-example) for more information.
Expand Down
30 changes: 30 additions & 0 deletions docs/zh-cn/third-party-libraries.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,36 @@

[useAsyncMemo](https://github.com/awmleer/use-async-memo)非常适合用来处理异步的计算数据,它对于`useMemo`是一个很好的补充。例如在翻页(`pageNumber`变化)时调用API加载远程数据。

## withWrapper

如果你在一个组件中创建了一个`FooStore``Provider`,那么是无法同时在这个组件通过`useStore(FooStore)`来获取这个Store的实例的:

```jsx
const App = function() {
const fooStore = useStore(FooStore) // 这里是获取不到 FooStore 实例的
return (
<Provider of={FooStore}>
<p>Hello.</p>
</Provider>
)
}
```

为了解决这个问题,可以使用[withWrapper](https://github.com/awmleer/with-wrapper)

```jsx
const App = withWrapper(element => (
<Provider of={FooStore}>
{element}
</Provider>
))(function() {
const fooStore = useStore(FooStore) // 现在这里可以获取到 FooStore 实例了
return (
<p>Hello.</p>
)
})
```

## immer

使用[immer](https://github.com/immerjs/immer)可以在某些时候简化`setState`的语法,详细用法可以参考其官方文档上的[介绍](https://github.com/immerjs/immer#reactsetstate-example)
Expand Down

0 comments on commit 68197a4

Please sign in to comment.