Refactor to allow dispatching of two kinds of Actions

They are:
 1. The existing type of Action, Objects with an `action` type.
 1. Asyncronous Actions, functions that accept a `dispatch` argument, which can be used to dispatch Actions asyncronously.
This commit is contained in:
Luke Barnard 2017-12-12 17:32:43 +00:00
parent 60d8ebb914
commit 13925db251
5 changed files with 37 additions and 31 deletions

View file

@ -14,13 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { createPromiseActionCreator } from './actionCreators';
import { asyncAction } from './actionCreators';
const GroupActions = {};
GroupActions.fetchJoinedGroups = createPromiseActionCreator(
'GroupActions.fetchJoinedGroups',
(matrixClient) => matrixClient.getJoinedGroups(),
);
GroupActions.fetchJoinedGroups = function(matrixClient) {
return asyncAction('GroupActions.fetchJoinedGroups', () => matrixClient.getJoinedGroups());
};
export default GroupActions;

View file

@ -15,14 +15,13 @@ limitations under the License.
*/
import Analytics from '../Analytics';
import { createPromiseActionCreator } from './actionCreators';
import { asyncAction } from './actionCreators';
import TagOrderStore from '../stores/TagOrderStore';
const TagOrderActions = {};
TagOrderActions.commitTagOrdering = createPromiseActionCreator(
'TagOrderActions.commitTagOrdering',
(matrixClient) => {
TagOrderActions.commitTagOrdering = function(matrixClient) {
return asyncAction('TagOrderActions.commitTagOrdering', () => {
// Only commit tags if the state is ready, i.e. not null
const tags = TagOrderStore.getOrderedTags();
if (!tags) {
@ -31,7 +30,7 @@ TagOrderActions.commitTagOrdering = createPromiseActionCreator(
Analytics.trackEvent('TagOrderActions', 'commitTagOrdering');
return matrixClient.setAccountData('im.vector.web.tag_ordering', {tags});
},
);
});
};
export default TagOrderActions;

View file

@ -14,25 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import dis from '../dispatcher';
/**
* Create an action creator that will dispatch actions asynchronously that
* indicate the current status of promise returned by the given function, fn.
* Create an asynchronous action creator that will dispatch actions indicating
* the current status of the promise returned by fn.
* @param {string} id the id to give the dispatched actions. This is given a
* suffix determining whether it is pending, successful or
* a failure.
* @param {function} fn the function to call with arguments given to the
* returned function. This function should return a Promise.
* @returns {function} a function that dispatches asynchronous actions when called.
* suffix determining whether it is pending, successful or
* a failure.
* @param {function} fn a function that returns a Promise.
* @returns {function} a function that uses its single argument as a dispatch
* function.
*/
export function createPromiseActionCreator(id, fn) {
return (...args) => {
dis.dispatch({action: id + '.pending'});
fn(...args).then((result) => {
dis.dispatch({action: id + '.success', result});
export function asyncAction(id, fn) {
return (dispatch) => {
dispatch({action: id + '.pending'});
fn().then((result) => {
dispatch({action: id + '.success', result});
}).catch((err) => {
dis.dispatch({action: id + '.failure', err});
dispatch({action: id + '.failure', err});
});
};
}

View file

@ -68,7 +68,7 @@ const TagPanel = React.createClass({
});
});
// This could be done by anything with a matrix client
GroupActions.fetchJoinedGroups(this.context.matrixClient);
dis.dispatch(GroupActions.fetchJoinedGroups(this.context.matrixClient));
},
componentWillUnmount() {
@ -81,7 +81,7 @@ const TagPanel = React.createClass({
_onGroupMyMembership() {
if (this.unmounted) return;
GroupActions.fetchJoinedGroups(this.context.matrixClient);
dis.dispatch(GroupActions.fetchJoinedGroups.bind(this.context.matrixClient));
},
onClick() {
@ -94,7 +94,7 @@ const TagPanel = React.createClass({
},
onTagTileEndDrag() {
TagOrderActions.commitTagOrdering(this.context.matrixClient);
dis.dispatch(TagOrderActions.commitTagOrdering(this.context.matrixClient));
},
render() {

View file

@ -20,14 +20,24 @@ const flux = require("flux");
class MatrixDispatcher extends flux.Dispatcher {
/**
* @param {Object} payload Required. The payload to dispatch.
* Must contain at least an 'action' key.
* @param {Object|function} payload Required. The payload to dispatch.
* If an Object, must contain at least an 'action' key.
* If a function, must have the signature (dispatch) => {...}.
* @param {boolean=} sync Optional. Pass true to dispatch
* synchronously. This is useful for anything triggering
* an operation that the browser requires user interaction
* for.
*/
dispatch(payload, sync) {
// Allow for asynchronous dispatching by accepting payloads that have the
// type `function (dispatch) {...}`
if (typeof payload === 'function') {
payload((action) => {
this.dispatch(action, sync);
});
return;
}
if (sync) {
super.dispatch(payload);
} else {