У меня есть очень простое React приложение:
https://codesandbox.io/s/24oq248v4n
, что примерно равно Oranges и Lemons, только это.
В основном он получает Oranges или Lemons от (имитируемого) внешнего API в зависимости от нажатой кнопки.
Ниже у вас есть код для магазина Oranges (тот, что для Lemons очень похож).
ЦСИ \ ресурсы \ активы \ JS \ магазины \ OrangeStore.js
import { EventEmitter } from "events";
import { sprintf } from "sprintf-js";
import AppDispatcher from "../dispatcher/AppDispatcher";
import AppApi from "../utils/AppApi";
const CHANGE_EVENT = "change";
let _response = null;
class OrangeStore extends EventEmitter {
constructor() {
super();
this.dispatchToken = AppDispatcher.register(this.handleActions.bind(this));
}
emitChange() {
this.emit(CHANGE_EVENT);
}
addChangeListener(callback) {
this.on(CHANGE_EVENT, callback);
}
removeChangeListener(callback) {
this.removeListener(CHANGE_EVENT, callback);
}
fetchOranges(data) {
AppApi.fetchOranges(data);
}
setOrangeResponse(data) {
_response = data;
}
getOrangeResponse() {
return _response;
}
clearOrangeResponse() {
_response = null;
}
handleActions(action) {
let nameObjectClass = this.constructor.name;
switch (action.type) {
case "FETCH_ORANGES":
this.fetchOranges(action.value);
break;
case "SET_ORANGE_RESPONSE":
this.setOrangeResponse(action.value);
break;
default:
console.error(sprintf('ATTENTION: action: "%s" entered on the wrong handle, the one for: "%s".', action.type, nameObjectClass));
break;
}
this.emitChange();
}
}
export default new OrangeStore();
Здесь у вас есть код, который отвечает за отправку действий:
ЦСИ \ ресурсы \ активы \ JS \ действия \ AppActions.js
import AppDispatcher from "../dispatcher/AppDispatcher";
class AppActions {
fetchOranges(data) {
AppDispatcher.dispatch({
type: "FETCH_ORANGES",
value: data
});
}
setOrangeResponse(data) {
AppDispatcher.dispatch({
type: "SET_ORANGE_RESPONSE",
value: data
});
}
fetchLemons(data) {
AppDispatcher.dispatch({
type: "FETCH_LEMONS",
value: data
});
}
setLemonResponse(data) {
AppDispatcher.dispatch({
type: "SET_LEMON_RESPONSE",
value: data
});
}
}
export default new AppActions();
Здесь у вас есть основной код:
ЦСИ \ index.js
import React from "react";
import ReactDOM from "react-dom";
import AppActions from "./resources/assets/js/actions/AppActions";
import OrangeStore from "./resources/assets/js/stores/OrangeStore";
import LemonStore from "./resources/assets/js/stores/LemonStore";
import "./styles.css";
class App extends React.Component {
client = {
firstName: 'George',
lastName: 'Washington',
};
componentWillMount() {
OrangeStore.addChangeListener(this.handleOrangeResponse);
LemonStore.addChangeListener(this.handleLemonResponse);
}
componentWillUnmount() {
OrangeStore.removeChangeListener(this.handleOrangeResponse);
LemonStore.removeChangeListener(this.handleLemonResponse);
}
getOranges = () => {
AppActions.fetchOranges(this.client);
};
getLemons = () => {
AppActions.fetchLemons(this.client);
};
handleOrangeResponse = () => {
let response = OrangeStore.getOrangeResponse();
console.log('inside: index.js / handleOrangeResponse() {...} | where: response == ', response);
}
handleLemonResponse = () => {
let response = LemonStore.getLemonResponse();
console.log('inside: index.js / handleLemonResponse() {...} | where: response == ', response);
}
render() {
return (
<div className="App">
<h1>Oranges and Lemons</h1>
<h2>Yet another Flux test!</h2>
<button onClick={this.getOranges}>Get Oranges</button>
<button onClick={this.getLemons}>Get Lemons</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Код работает почти нормально, но ...
Моя проблема: действия, соответствующие Oranges, захватываются слушателем Lemons и наоборот.
Как вы можете видеть на следующем изображении:
Вам предлагается попробовать это самостоятельно: https://codesandbox.io/s/24oq248v4n
Чтобы увидеть результаты: Info и Errors вы должны открыть консоль Code Sandbox внизу.
По моему мнению, слушатели для Oranges должны захватывать только действия Oranges и то же самое для: Lemons.
Полагаю, здесь я пропускаю одну ключевую деталь.
Есть ли у вас какие-либо идеи об этом поведении?
Если возможно, пожалуйста, раскошелите мой код выше и укажите ссылку на ваш фиксированный код здесь.
Некоторое объяснение также приветствуется.
Спасибо!