Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CoCo_Code_Op2
next.js
提交
08b14e49
N
next.js
项目概览
CoCo_Code_Op2
/
next.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
next.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
08b14e49
编写于
8月 09, 2019
作者:
J
Junyoung Choi
提交者:
Luis Fernando Alvarez D
8月 08, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Simplify mobx example (#8269)
上级
43370c1f
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
23 addition
and
31 deletion
+23
-31
examples/with-mobx/pages/_app.js
examples/with-mobx/pages/_app.js
+14
-16
examples/with-mobx/store.js
examples/with-mobx/store.js
+9
-15
未找到文件。
examples/with-mobx/pages/_app.js
浏览文件 @
08b14e49
import
App
,
{
Container
}
from
'
next/app
'
import
App
,
{
Container
}
from
'
next/app
'
import
React
from
'
react
'
import
React
from
'
react
'
import
{
initialize
Store
}
from
'
../store
'
import
{
fetchInitialStoreState
,
Store
}
from
'
../store
'
import
{
Provider
}
from
'
mobx-react
'
import
{
Provider
}
from
'
mobx-react
'
class
MyMobxApp
extends
App
{
class
MyMobxApp
extends
App
{
static
async
getInitialProps
(
appContext
)
{
state
=
{
// Get or Create the store with `undefined` as initialState
store
:
new
Store
(),
// This allows you to set a custom default initialState
}
const
mobxStore
=
initializeStore
()
// Provide the store to getInitialProps of pages
appContext
.
ctx
.
mobxStore
=
mobxStore
let
appProps
=
await
App
.
getInitialProps
(
appContext
)
// Fetching serialized(JSON) store state
static
async
getInitialProps
(
appContext
)
{
const
appProps
=
await
App
.
getInitialProps
(
appContext
)
const
initialStoreState
=
await
fetchInitialStoreState
()
return
{
return
{
...
appProps
,
...
appProps
,
initial
MobxState
:
mobxStor
e
,
initial
StoreStat
e
,
}
}
}
}
constructor
(
props
)
{
// Hydrate serialized state to store
super
(
props
)
static
getDerivedStateFromProps
(
props
,
state
)
{
const
isServer
=
typeof
window
===
'
undefined
'
state
.
store
.
hydrate
(
props
.
initialStoreState
)
this
.
mobxStore
=
isServer
return
state
?
props
.
initialMobxState
:
initializeStore
(
props
.
initialMobxState
)
}
}
render
()
{
render
()
{
const
{
Component
,
pageProps
}
=
this
.
props
const
{
Component
,
pageProps
}
=
this
.
props
return
(
return
(
<
Container
>
<
Container
>
<
Provider
store
=
{
this
.
mobxS
tore
}
>
<
Provider
store
=
{
this
.
state
.
s
tore
}
>
<
Component
{...
pageProps
}
/
>
<
Component
{...
pageProps
}
/
>
<
/Provider
>
<
/Provider
>
<
/Container
>
<
/Container
>
...
...
examples/with-mobx/store.js
浏览文件 @
08b14e49
...
@@ -4,14 +4,16 @@ import { useStaticRendering } from 'mobx-react'
...
@@ -4,14 +4,16 @@ import { useStaticRendering } from 'mobx-react'
const
isServer
=
typeof
window
===
'
undefined
'
const
isServer
=
typeof
window
===
'
undefined
'
useStaticRendering
(
isServer
)
useStaticRendering
(
isServer
)
class
Store
{
export
class
Store
{
@
observable
lastUpdate
=
0
@
observable
lastUpdate
=
0
@
observable
light
=
false
@
observable
light
=
false
constructor
(
isServer
,
initialData
=
{}
)
{
hydrate
(
serializedStore
)
{
this
.
lastUpdate
=
this
.
lastUpdate
=
initialData
.
lastUpdate
!=
null
?
initialData
.
lastUpdate
:
Date
.
now
()
serializedStore
.
lastUpdate
!=
null
this
.
light
=
!!
initialData
.
light
?
serializedStore
.
lastUpdate
:
Date
.
now
()
this
.
light
=
!!
serializedStore
.
light
}
}
@
action
start
=
()
=>
{
@
action
start
=
()
=>
{
...
@@ -24,15 +26,7 @@ class Store {
...
@@ -24,15 +26,7 @@ class Store {
stop
=
()
=>
clearInterval
(
this
.
timer
)
stop
=
()
=>
clearInterval
(
this
.
timer
)
}
}
let
store
=
null
export
async
function
fetchInitialStoreState
()
{
// You can do anything to fetch initial store state
export
function
initializeStore
(
initialData
)
{
return
{}
// Always make a new store if server, otherwise state is shared between requests
if
(
isServer
)
{
return
new
Store
(
isServer
,
initialData
)
}
if
(
store
===
null
)
{
store
=
new
Store
(
isServer
,
initialData
)
}
return
store
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录