Skip to content

Commit c9e8afb

Browse files
ArrayZoneYourArrayZoneYour
committed
refactor(api): useModel (old) -> model, add new Context based useModel
1 parent 45a9fdb commit c9e8afb

File tree

11 files changed

+59
-60
lines changed

11 files changed

+59
-60
lines changed

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ The State management library for React
1717
🐛 Debug easily on test environment
1818

1919
```tsx
20-
import { useModel, createStore } from 'react-model'
20+
import { model, createStore } from 'react-model'
2121

2222
// define model
2323
const useTodo = () => {
24-
const [items, setItems] = useModel(['Install react-model', 'Read github docs', 'Build App'])
24+
const [items, setItems] = model(['Install react-model', 'Read github docs', 'Build App'])
2525
return { items, setItems }
2626
}
2727

@@ -50,7 +50,7 @@ const TodoList = () => {
5050

5151
## Quick Start
5252

53-
[createStore + useModel](https://codesandbox.io/s/createstore-usemodal-all-of-your-state-4u8s6)
53+
[createStore + model](https://codesandbox.io/s/createstore-usemodal-all-of-your-state-4u8s6)
5454

5555
[CodeSandbox: TodoMVC](https://codesandbox.io/s/moyxon99jx)
5656

@@ -105,10 +105,10 @@ You can create a shared / local store by createStore api.
105105

106106
```typescript
107107
import { useState } from 'react'
108-
import { useModel } from 'react-model'
108+
import { model } from 'react-model'
109109
const { useStore } = createStore(() => {
110110
const [localCount, setLocalCount] = useState(1) // Local State, Independent in different components
111-
const [count, setCount] = useModel(1) // Global State, the value is the same in different components
111+
const [count, setCount] = model(1) // Global State, the value is the same in different components
112112
const incLocal = () => {
113113
setLocalCount(localCount + 1)
114114
}
@@ -729,7 +729,7 @@ const Counter: ModelType<
729729

730730
// v4.1.x
731731
const Counter = createStore(() => {
732-
const [state, setState] = useModel({ count: 0 })
732+
const [state, setState] = model({ count: 0 })
733733
const actions = {
734734
increment: (params) => {
735735
setState((state) => {

‎__test__/atom/lane.spec.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import * as React from 'react'
33
import { renderHook, act } from '@testing-library/react-hooks'
44
import { render } from '@testing-library/react'
55
import { act as RAct } from 'react-dom/test-utils'
6-
import { createStore, Model, useAtom, Provider } from '../../src'
6+
import { createStore, Model, useModel, Provider } from '../../src'
77

88
describe('lane model', () => {
99
test('single model', () => {
1010
const wrapper = Provider
1111
const { useStore } = createStore(() => {
12-
const [count, setCount] = useAtom(1)
12+
const [count, setCount] = useModel(1)
1313
return { count, setCount }
1414
})
1515
let renderTimes = 0
@@ -41,7 +41,7 @@ describe('lane model', () => {
4141
const wrapper = Provider
4242
const { useStore } = Model({})
4343
createStore('Shared', () => {
44-
const [count, setCount] = useAtom(1)
44+
const [count, setCount] = useModel(1)
4545
return { count, setCount }
4646
})
4747

@@ -75,7 +75,7 @@ describe('lane model', () => {
7575
const wrapper = Provider
7676
let subscribeTimes = 0
7777
const { subscribe, unsubscribe, getState } = createStore(() => {
78-
const [count, setCount] = useAtom(1)
78+
const [count, setCount] = useModel(1)
7979
return { count, setCount }
8080
})
8181

@@ -123,10 +123,10 @@ describe('lane model', () => {
123123
})
124124
})
125125

126-
test('pass function to useAtom ', () => {
126+
test('pass function to useModel ', () => {
127127
const wrapper = Provider
128128
const { useStore } = createStore(() => {
129-
const [count, setCount] = useAtom(() => 1)
129+
const [count, setCount] = useModel(() => 1)
130130
return { count, setCount }
131131
})
132132
let renderTimes = 0
@@ -157,7 +157,7 @@ describe('lane model', () => {
157157
test('false value can be accepted', () => {
158158
const wrapper = Provider
159159
const { useStore } = createStore(() => {
160-
const [count, setCount] = useAtom(true)
160+
const [count, setCount] = useModel(true)
161161
return { count, setCount }
162162
})
163163

@@ -197,7 +197,7 @@ describe('lane model', () => {
197197
test('array value is protected', () => {
198198
const wrapper = Provider
199199
const { useStore } = createStore(() => {
200-
const [list, setList] = useAtom([] as number[])
200+
const [list, setList] = useModel([] as number[])
201201
return { list, setList }
202202
})
203203

@@ -241,7 +241,7 @@ describe('lane model', () => {
241241
test('object value is merged', () => {
242242
const wrapper = Provider
243243
const { useStore } = createStore(() => {
244-
const [obj, setObj] = useAtom({ name: 'Bob', age: 17 })
244+
const [obj, setObj] = useModel({ name: 'Bob', age: 17 })
245245
return { obj, setObj }
246246
})
247247

@@ -294,8 +294,8 @@ describe('lane model', () => {
294294
test('multiple models', () => {
295295
const wrapper = Provider
296296
const { useStore } = createStore(() => {
297-
const [count, setCount] = useAtom(1)
298-
const [name, setName] = useAtom('Jane')
297+
const [count, setCount] = useModel(1)
298+
const [name, setName] = useModel('Jane')
299299
return { count, name, setName, setCount }
300300
})
301301
let renderTimes = 0
@@ -336,13 +336,13 @@ describe('lane model', () => {
336336
test('multiple stores', () => {
337337
const wrapper = Provider
338338
const { useStore } = createStore(() => {
339-
const [count, setCount] = useAtom(1)
339+
const [count, setCount] = useModel(1)
340340

341341
return { count, setCount }
342342
})
343343

344344
const { useStore: useOtherStore } = createStore(() => {
345-
const [name, setName] = useAtom('Jane')
345+
const [name, setName] = useModel('Jane')
346346
return { name, setName }
347347
})
348348
let renderTimes = 0
@@ -385,7 +385,7 @@ describe('lane model', () => {
385385
test('share single model between components', () => {
386386
const wrapper = Provider
387387
const { useStore } = createStore(() => {
388-
const [count, setCount] = useAtom(1)
388+
const [count, setCount] = useModel(1)
389389
return { count, setCount }
390390
})
391391
let renderTimes = 0
@@ -429,16 +429,16 @@ describe('lane model', () => {
429429
}
430430

431431
const { useStore } = createStore(() => {
432-
const [count, setCount] = useAtom(1)
433-
const [name, setName] = useAtom('Jane')
432+
const [count, setCount] = useModel(1)
433+
const [name, setName] = useModel('Jane')
434434
return { count, setCount, name, setName }
435435
})
436436
const { useStore: useOtherStore } = createStore(() => {
437-
const [data, setData] = useAtom({ status: 'UNKNOWN' })
437+
const [data, setData] = useModel({ status: 'UNKNOWN' })
438438
return { data, setData }
439439
})
440440
const { useStore: useOnce } = createStore(() => {
441-
const [status, set] = useAtom(false)
441+
const [status, set] = useModel(false)
442442
return { status, set }
443443
})
444444
let renderTimes = 0

‎__test__/atom/migrate.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/// <reference path="../index.d.ts" />
22
import { renderHook, act } from '@testing-library/react-hooks'
3-
import { createStore, useAtom, Provider } from '../../src'
3+
import { createStore, useModel, Provider } from '../../src'
44

55
describe('migrate test', () => {
66
test('migrate from v4.0.x', () => {
77
const wrapper = Provider
88
const store = createStore(() => {
9-
const [state, setState] = useAtom({ count: 0, otherKey: 'key' })
9+
const [state, setState] = useModel({ count: 0, otherKey: 'key' })
1010
const actions = {
1111
add: (params: number) => {
1212
return setState({

‎__test__/atom/react.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { renderHook, act } from '@testing-library/react-hooks'
33
import { render } from '@testing-library/react'
44
import { act as RAct } from 'react-dom/test-utils'
5-
import { createStore, useAtom, Provider } from '../../src'
5+
import { createStore, useModel, Provider } from '../../src'
66
import { useState, useEffect } from 'react'
77
import * as React from 'react'
88

@@ -164,8 +164,8 @@ describe('compatible with useState + useEffect', () => {
164164
const useCount = () => {
165165
// useState create local state
166166
const [count, setCount] = useState(1)
167-
// useAtom create shared state
168-
const [name, setName] = useAtom('Jane')
167+
// useModel create shared state
168+
const [name, setName] = useModel('Jane')
169169
return { count, setCount, name, setName }
170170
}
171171
const { useStore } = createStore(useCount)

‎__test__/lane/lane.spec.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/// <reference path="../index.d.ts" />
22
import { renderHook, act } from '@testing-library/react-hooks'
3-
import { createStore, useModel, Model } from '../../src'
3+
import { createStore, model, Model } from '../../src'
44

55
describe('lane model', () => {
66
test('single model', async () => {
77
const { useStore } = createStore(() => {
8-
const [count, setCount] = useModel(1)
8+
const [count, setCount] = model(1)
99
return { count, setCount }
1010
})
1111
let renderTimes = 0
@@ -33,7 +33,7 @@ describe('lane model', () => {
3333
test('create store with namespace', async () => {
3434
const { useStore } = Model({})
3535
createStore('Shared', () => {
36-
const [count, setCount] = useModel(1)
36+
const [count, setCount] = model(1)
3737
return { count, setCount }
3838
})
3939

@@ -65,7 +65,7 @@ describe('lane model', () => {
6565
test('subscribe model', () => {
6666
let subscribeTimes = 0
6767
const { subscribe, unsubscribe, getState } = createStore(() => {
68-
const [count, setCount] = useModel(1)
68+
const [count, setCount] = model(1)
6969
return { count, setCount }
7070
})
7171

@@ -105,9 +105,9 @@ describe('lane model', () => {
105105
})
106106
})
107107

108-
test('pass function to useModel ', async () => {
108+
test('pass function to model ', async () => {
109109
const { useStore } = createStore(() => {
110-
const [count, setCount] = useModel(() => 1)
110+
const [count, setCount] = model(() => 1)
111111
return { count, setCount }
112112
})
113113
let renderTimes = 0
@@ -134,7 +134,7 @@ describe('lane model', () => {
134134

135135
test('false value can be accepted', async () => {
136136
const { useStore } = createStore(() => {
137-
const [count, setCount] = useModel(true)
137+
const [count, setCount] = model(true)
138138
return { count, setCount }
139139
})
140140

@@ -170,7 +170,7 @@ describe('lane model', () => {
170170

171171
test('array value is protected', async () => {
172172
const { useStore } = createStore(() => {
173-
const [list, setList] = useModel(<Array<number>>[])
173+
const [list, setList] = model(<Array<number>>[])
174174
return { list, setList }
175175
})
176176

@@ -210,8 +210,8 @@ describe('lane model', () => {
210210

211211
test('multiple models', async () => {
212212
const { useStore } = createStore(() => {
213-
const [count, setCount] = useModel(1)
214-
const [name, setName] = useModel('Jane')
213+
const [count, setCount] = model(1)
214+
const [name, setName] = model('Jane')
215215
return { count, name, setName, setCount }
216216
})
217217
let renderTimes = 0
@@ -248,13 +248,13 @@ describe('lane model', () => {
248248

249249
test('multiple stores', async () => {
250250
const { useStore } = createStore(() => {
251-
const [count, setCount] = useModel(1)
251+
const [count, setCount] = model(1)
252252

253253
return { count, setCount }
254254
})
255255

256256
const { useStore: useOtherStore } = createStore(() => {
257-
const [name, setName] = useModel('Jane')
257+
const [name, setName] = model('Jane')
258258
return { name, setName }
259259
})
260260
let renderTimes = 0
@@ -293,7 +293,7 @@ describe('lane model', () => {
293293

294294
test('share single model between components', async () => {
295295
const { useStore } = createStore(() => {
296-
const [count, setCount] = useModel(1)
296+
const [count, setCount] = model(1)
297297
return { count, setCount }
298298
})
299299
let renderTimes = 0
@@ -325,16 +325,16 @@ describe('lane model', () => {
325325

326326
test('complex case', async () => {
327327
const { useStore, getState } = createStore(() => {
328-
const [count, setCount] = useModel(1)
329-
const [name, setName] = useModel('Jane')
328+
const [count, setCount] = model(1)
329+
const [name, setName] = model('Jane')
330330
return { count, setCount, name, setName }
331331
})
332332
const { useStore: useOtherStore } = createStore(() => {
333-
const [data, setData] = useModel({ status: 'UNKNOWN' })
333+
const [data, setData] = model({ status: 'UNKNOWN' })
334334
return { data, setData }
335335
})
336336
const { useStore: useOnce } = createStore(() => {
337-
const [status, set] = useModel(false)
337+
const [status, set] = model(false)
338338
return { status, set }
339339
})
340340
let renderTimes = 0

‎__test__/lane/migrate.spec.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/// <reference path="../index.d.ts" />
22
import { renderHook, act } from '@testing-library/react-hooks'
3-
import { createStore, useModel } from '../../src'
3+
import { createStore, model } from '../../src'
44

55
describe('migrate test', async () => {
66
test('migrate from v4.0.x', async () => {
77
const store = createStore(() => {
8-
const [state, setState] = useModel({ count: 0, otherKey: 'key' })
8+
const [state, setState] = model({ count: 0, otherKey: 'key' })
99
const actions = {
1010
add: (params: number) => {
1111
return setState({
@@ -51,7 +51,6 @@ describe('migrate test', async () => {
5151
result.current.actions.increment(5)
5252
})
5353

54-
5554
act(() => {
5655
expect(renderTimes).toEqual(3)
5756
expect(result.current.state.count).toBe(10)

‎__test__/lane/react.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference path="../index.d.ts" />
22
import { renderHook, act } from '@testing-library/react-hooks'
3-
import { createStore, useModel } from '../../src'
3+
import { createStore, model } from '../../src'
44
import { useState, useEffect } from 'react'
55

66
describe('compatible with useState + useEffect', () => {
@@ -136,8 +136,8 @@ describe('compatible with useState + useEffect', () => {
136136
const useCount = () => {
137137
// useState create local state
138138
const [count, setCount] = useState(1)
139-
// useModel create shared state
140-
const [name, setName] = useModel('Jane')
139+
// model create shared state
140+
const [name, setName] = model('Jane')
141141
return { count, setCount, name, setName }
142142
}
143143
const { useStore } = createStore(useCount)

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-model",
3-
"version": "4.3.0-alpha.0",
3+
"version": "5.0.0-alpha.0",
44
"description": "The State management library for React",
55
"main": "./dist/react-model.js",
66
"module": "./dist/react-model.esm.js",

‎src/global.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ let withDevTools = false
2424

2525
let uid = 0 // The unique id of hooks
2626
let storeId = 0 // The unique id of stores
27-
let currentStoreId = '0' // Used for useModel
27+
let currentStoreId = '0' // Used for model
2828
let gid = 0 // The unique id of models' group
2929

3030
export default {

‎src/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ interface BaseContext<S = {}, P = any> {
9797

9898
interface InnerContext<S = {}> extends BaseContext<S> {
9999
// Actions with function type context will always invoke current component's reload.
100-
// f -> function, o -> outer, c -> class, u -> useModel
100+
// f -> function, o -> outer, c -> class, u -> model
101101
type?: 'f' | 'o' | 'c' | 'u'
102102
__hash?: string
103103
}

0 commit comments

Comments
 (0)