我解决此问题的工作解决方案如下所示。 @oppo 给出的解决方案中的 _onChange 回调帮助了我。
我做了什么来解决这个问题：-
1. 调用添加用户操作时，我在商店中设置了一个标志，例如 {reloadUsers:true}
2. 查看组件的 _onChange 回调检查这个标志，如果它是真的，那么它会触发一个动作从 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;