首先我们来组织一下我们的 Container
这个 Container 类似 redux 的 store,但是比 redux的store 简单易懂,包含了数据和操作数据的方法
import React from 'react';
import { Provider, Container, Subscribe, } from 'unstated';
// todo list 数据,和操作该数据的方法
class TodoContainer extends Container {
state = {
todos: []
}
add(text) {
}
toggle(id) {
}
remove(id) {
}
}
// 输入框数据
class TodoInputContainer extends Container {
state = {
text: ''
}
change(text) {
this.setState(text)
}
}
// 过滤搜索数据
class TodoFilterContainer extends Container {
state = {
keyword: '',
status: ['all', 'removed', 'finish'],
current_status: 'all',
}
changeStatus(current_status) {
this.setState({current_status})
}
changeKeyword(keyword) {
this.setState({keyword})
}
}
没有redux的reducer/actions/中间件等这些多余的概念…
现在该将Container绑定到我们需要的地方了:Subscribe,是一个组件的写法:
...
// 这里我们只渲染一个简单的 TodoInputContainer
function TodoInput(props) {
<Subscribe to=[TodoInputContainer]>
{
todoInput => (
<input
value={todoInput.state.text}
onChange={e => todoInput.change(e.target.value)}
/>
)
}
</Subscribe>
}
这里只是写一个引子,多个 Container 怎么共享? 看看官方例子(clone 下来,npm install
&& npm run example): https://github.com/thejameskyle/unstated/tree/master/example
上面的只是本地数据交互的,接下来我们谈谈在 Unstated 里面怎么做请求数据交互;