MobX http вызов Rest API и возвращение Observable
Я пытаюсь с MobX. Мои вопросы
- MobX поставляется со встроенной http-частью? Если да, то как называется / функция?
- Если ответ на вопрос № 1 отрицательный и я использую axios, как я могу преобразовать разрешенное обещание в мое наблюдаемое?
Я знаю, что следующее неверно. Каков общий способ достичь этого?
export class TodoStore {
@observable todos = [];
....
fetchTodo() {
axios.get("http://rest.learncode.academy/api/reacttest/tweets")
.then((response) => {
response.data.map(item => {
this.todos.push(new Todo(item));
})
.catch((err) => {
....
});
});
}
}
1 ответ
Это работает. Я проверял это.
TodoStore.js
class Todo {
@observable value
@observable id
@observable complete
constructor(value) {
this.value = value
this.id = Date.now()
this.complete = false
}
}
export class TodoStore {
@observable todos = []
@observable filter = ""
@computed get filteredTodos() {
var matchesFilter = new RegExp(this.filter, "i")
return this.todos.filter(todo => !this.filter || matchesFilter.test(todo.value))
}
......
fetchTodos() {
axios.get("http://rest.learncode.academy/api/reacttest/tweets")
.then((response) => {
console.log("in axios ", response.data)
response.data.map(item => {
console.log("in axios ", item)
this.todos.push(new Todo(item.text));
});
})
.catch((err) => {
console.log("in axios ", err)
})
}
}
TodoList.js
export default observer(
class TodoList extends React.Component {
componentWillMount() {
this.props.store.fetchTodos()
}
........
render() {
........
return <div>
<h1>todos</h1>
......
</div>
}
}
)