-
Notifications
You must be signed in to change notification settings - Fork 269
/
complex.js
72 lines (62 loc) · 1.43 KB
/
complex.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// @flow
import React from 'react';
import { render } from 'react-dom';
import { Subscribe, Container } from '../src/unstated';
type AppState = {
amount: number
};
class AppContainer extends Container<AppState> {
state = {
amount: 1
};
setAmount(amount: number) {
this.setState({ amount });
}
}
type CounterState = {
count: number
};
class CounterContainer extends Container<CounterState> {
state = {
count: 0
};
increment(amount: number) {
this.setState({ count: this.state.count + amount });
}
decrement(amount: number) {
this.setState({ count: this.state.count - amount });
}
}
function Counter() {
return (
<Subscribe to={[AppContainer, CounterContainer]}>
{(app, counter) => (
<div>
<span>Count: {counter.state.count}</span>
<button onClick={() => counter.decrement(app.state.amount)}>-</button>
<button onClick={() => counter.increment(app.state.amount)}>+</button>
</div>
)}
</Subscribe>
);
}
function App() {
return (
<Subscribe to={[AppContainer]}>
{app => (
<div>
<Counter />
<label>Amount: </label>
<input
type="number"
value={app.state.amount}
onChange={event => {
app.setAmount(parseInt(event.currentTarget.value, 10));
}}
/>
</div>
)}
</Subscribe>
);
}
render(<App />, window.complex);