Слушайте действия Reflux вне магазинов

Question

Я пытаюсь понять, как вписать вызовы ajax в поток вещей / рефлюкс. Из клочков информации, которые я нашел в Интернете, кажется правильным отделить логику API от магазинов.

Начав там, я создал клиентский API, который отправляет запросы на сервер. Теперь я хочу, чтобы эти функции слушали мои действия, затем делали запрос и, в случае успеха, вызывали другие действия, которые впоследствии обновляли хранилища новыми данными с сервера.

Как можно получить что-то похожее на метод рефлюкс createStore для моего API? Или есть какой-то другой чистый способ для вызовов моего сервера слушать действия?

Answer 1

Магазин является связующим звеном между вашими действиями и API. Так же, как ответили в /questions/35902757/v-reflyuks-kak-ya-mogu-poluchit-dannyie-iz-veb-api-aspnet/35902764#35902764

Разница в вашем случае заключается в том, что вы не выполняете ajax-запрос непосредственно в хранилище, а просматриваете свой API-класс, заполняете хранилище данными, возвращенными из вашего API, и запускаете обновление хранилища.

Answer 2

Мой Api - это простой старый объект javascript (POJO), подобный этому. Это в ES6, но вы должны понять:

import request from 'superagent';

// Other helpers functions and setup

let handle = (err) => {
  // error handling stuff
};

export default {
  create(user, cb) {
    return request
      .post(server + '/api/users/new')
      .send(user)
      .on('error', (err) => {
        handle(err);
        cb(err);
      })
      .end(cb);
  },
  login(user, cb) {
    // Post some more stuff
  }
};

Затем я называю это в моем Магазине так:

import Reflux from 'reflux';

import UserActions from '../actions/UserActions';

import Api from '../api/UserApi';

const UserStore = Reflux.createStore({
  listenables: [UserActions],
  getInitialState() {
    // insert stuff
  },
  onCreate(user) {
    Api.create(user, (err, res) => {
      if (err) {
        console.log(err);
      } else {
        // Do something with res
        // this is for JSON, your API might be different
        let user = JSON.parse(res.text);
        this.update(user);
      }
    })
  },
  onLogin(user) {
    // login stuff
  },
  // More methods
  update(user) {
    this.currentUser = user;
    this.trigger(user);
  }
});

Я не обновляю свой магазин и this.trigger() пока вызов API не вернется.

Более разумной идеей может быть оптимистичное обновление:

// inside the todo store
onCreate(todo) {
  Api.create(todo);
  this.update([todos].concat(this.todos));
},
update(todos) {
  this.todos = todos;
  this.trigger(todos);
}

Очевидно, это один из способов сделать это, но это, конечно, не единственный способ.

Но основная идея заключается в том, что Магазин использует API.

API не является частью потока данных:

Действие-> Магазин-> Компонент-> Действие и т. Д.