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

Question

Я пытаюсь выяснить, как подстраивать вызовы ajax в поток flux/reflux. От обрезков info Я нашел онлайн, кажется правильным, чтобы отделить логику API от магазинов.

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

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

Answer 1

Магазин - это клей между вашими действиями и API. Точно так же, как и ответы в https://stackoverflow.com/a/27487312/274483

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

Answer 2

My 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() до возвращения апи вызова.

Разумная идея может быть оптимистически обновление:

// 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-интерфейс не является частью потока данных:

Action-> магазин-> Component-> действий и т.д.