MobX-HTTP-Aufruf an Rest-API und Rückgabe von Observable

Question

Ich versuche es mit MobX. Meine Fragen sind

1. Ist MobX mit einem http-Stück gebaut? Wenn ja, wie lautet der Name/Funktion?
2. Wenn die Antwort auf # 1 Nein ist und ich Axios verwende, wie kann ich das aufgelöste Versprechen in meine Observable konvertieren?

Ich weiß, das Folgende ist falsch. Was ist der übliche Weg, dies zu erreichen?

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) => { 
     .... 
     }); 
    }); 
    } 
} 

Answer 1

Das funktioniert. Ich habe es getestet.

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> 
    } 
} 
)