MobX http вызов Rest API и возвращение Observable

Я пытаюсь с MobX. Мои вопросы

  1. MobX поставляется со встроенной http-частью? Если да, то как называется / функция?
  2. Если ответ на вопрос № 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>
  }
}
)
Другие вопросы по тегам