Мое рабочее решение для решения этой проблемы, как показано ниже. Мне помог обратный вызов _onChange в решении, предоставленном @oppo.
Что я сделал для решения этой проблемы: 1. Когда вызывается действие добавления пользователя, я устанавливаю флаг в своем магазине, например {reloadUsers:true} действие для загрузки данных с сервера API.
Ниже находится магазин
'use strict';
var AppDispatcher = require('../dispatcher/AppDispatcher');
var Constants = require('../constants/Constants');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var ActionTypes = Constants.ActionTypes;
var CHANGE_EVENT = 'change';
var _state = {
loading: false,
error : null,
users: {},
isAdded: true,
addFormErrors: [],
reloadUsers: false //Whether to reload user table or not
};
//Stores data recieved from server on page load
function persistStoreData(loading, error, response) {
_state.loading = loading;
_state.error = error;
_state.users = response;
_state.reloadUsers = false;
}
//Updates data recieved from server if data saved
function updateAddFormData(enableSave){
_state.enableAddButton = enableSave;
if(!_state.enableAddButton){
_state.isAdded = true;
_state.reloadUsers = true;
}
else{
_state.isAdded = false;
}
}
var UsersStore = assign({}, EventEmitter.prototype, {
getState: function(){
return _state;
},
getUsers: function(){
return this._users;
},
emitChange: function() {
//console.log('store change event');
this.emit(CHANGE_EVENT);
},
/**
* @param {function} callback
*/
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
/**
* @param {function} callback
*/
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
},
dispatcherIndex: AppDispatcher.register(function(payload) {
var action = payload.action;
switch(action.actionType){
case ActionTypes.LOAD_USERS_SUCCESS:
persistStoreData(false, null, action.usersObj);
break;
case ActionTypes.LOAD_USERS_FAIL:
persistStoreData(false, payload.action.error, {});
break;
case ActionTypes.ADD_USER_SUCCESS:
updateAddFormData(false, "Added", "success", []);
break;
case ActionTypes.ADD_USER_FAIL:
updateAddFormData(true, payload.action.error);
break;
default:
return true;
}
UsersStore.emitChange();
return true; // No errors. Needed by promise in Flux Dispatcher.
})
});
module.exports = UsersStore;
Далее идет диспетчер
'use strict';
var Constants = require('../constants/Constants');
var Dispatcher = require('flux').Dispatcher;
var assign = require('object-assign');
var PayloadSources = Constants.PayloadSources;
var AppDispatcher = assign(new Dispatcher(), {
/**
* @param {object} action The details of the action, including the action's
* type and additional data coming from the server.
*/
handleServerAction: function(action) {
var payload = {
source: PayloadSources.SERVER_ACTION,
action: action
};
this.dispatch(payload);
}
});
module.exports = AppDispatcher;
Ниже приведены мои константы
var keyMirror = require('keymirror');
module.exports = {
ActionTypes: keyMirror({
ADD_USER_SUCCESS: null,
ADD_USER_FAIL: null,
LOAD_USERS: null,
LOAD_USERS_SUCCESS: null,
LOAD_USERS_FAIL: null,
}),
PayloadSources: keyMirror({
SERVER_ACTION: null,
})
};
Ниже приведен создатель действия.
'use strict';
var AppDispatcher = require('../dispatcher/AppDispatcher');
var Constants = require('../constants/Constants');
var ApiClient = require('../clients/ApiClient');
var ActionTypes = Constants.ActionTypes;
var ActionCreator = {
loadUsers: function(){
ApiClient.getUsers(function(usersObj) {
AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_USERS_SUCCESS, usersObj: usersObj});
}.bind(this), function(error) {
AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_USERS_FAIL, error: error});
}.bind(this));
}
addUser: function(userObj){
ApiClient.addUser(
userObj,
function(response){
AppDispatcher.handleServerAction({actionType:ActionTypes.ADD_USER_SUCCESS, response: response});
}.bind(this),
function(error){
AppDispatcher.handleServerAction({actionType:ActionTypes.ADD_USER_FAIL, error: error});
}.bind(this)
);
}
};
module.exports = ActionCreator;
Ниже приведен основной компонент представления (только важные части).
'use strict';
var React = require('react');
var ActionCreator = require('../actions/ActionCreator');
var UsersStore = require('../stores/UsersStore');
var UsersTable = require('./UsersTable.jsx');
var UserAddForm = require('./UserAddForm.jsx');
var ManageUsers = React.createClass({
getInitialState: function() {
return UsersStore.getState();
},
componentDidMount: function() {
ActionCreator.loadUsers();//Invoking Action, loading initial data
UsersStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
UsersStore.removeChangeListener(this._onChange);
},
_onChange: function() {
var state = UsersStore.getState();
if(state.reloadUsers === true){
//Only reload users if state has this variable set
ActionCreator.loadUsers();
}
else{
this.setState(state);
}
},
render: function(){
//Rendering logic would go here, below is just a prototype
return (
<div>
<UserAddForm onSubmit={handleFormSubmit} />
<UsersTable/>
</div>
);
}
});
module.exports = ManageUsers;
Ниже приведен API-клиент
'use strict';
var $ = require('jquery');
var ApiClient = {
getUsers : function(success, failure){
$.ajax({
url : '/api/get-users',
dataType: 'json',
success : function(data){
success(data);
},
error : function(jqXHR, textStatus, errorThrown){
failure(errorThrown);
}
});
},
addUser : function(data, success, failure){
$.ajax({
url : '/api/add-user',
dataType: 'json',
type: 'post',
data: 'data='+JSON.stringify(data),
success : function(data){
success(data);
},
error : function(jqXHR){
var errorObj = {};
try{
errorObj = JSON.parse(jqXHR.responseText);
}
catch(e){
errorObj['main'] = "An error occured";
}
failure(errorObj);
}
});
}
};
module.exports = ApiClient;
person
techgyani
schedule
24.02.2015
