Introduce action creators

These can be used to dispatch actions immediately, or after some asynchronous
work has been done. Also, create GroupActions.fetchJoinedGroups as an example.

The concept of async action creators can be used in the following cases:
 - stores or views that do async work, dispatching based on the results
 - actions that have complicated payloads, would make more sense as functions
   with documentation that dispatch created actions.
pull/21833/head
Luke Barnard 2017-12-07 14:17:32 +00:00
parent 65d88334a9
commit ee6df105fe
4 changed files with 64 additions and 16 deletions

View File

@ -0,0 +1,27 @@
/*
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { createPromiseActionCreator } from './actionCreators';
const GroupActions = {};
GroupActions.fetchJoinedGroups = createPromiseActionCreator(
'GroupActions.fetchJoinedGroups',
(matrixClient) => matrixClient.getJoinedGroups(),
);
export default GroupActions;

View File

@ -0,0 +1,28 @@
/*
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import dis from '../dispatcher';
export function createPromiseActionCreator(id, fn) {
return (...args) => {
dis.dispatch({action: id + '.pending'});
fn(...args).then((result) => {
dis.dispatch({action: id + '.success', result});
}).catch((err) => {
dis.dispatch({action: id + '.failure', err});
})
}
}

View File

@ -20,6 +20,9 @@ import { MatrixClient } from 'matrix-js-sdk';
import FilterStore from '../../stores/FilterStore';
import FlairStore from '../../stores/FlairStore';
import TagOrderStore from '../../stores/TagOrderStore';
import GroupActions from '../../actions/GroupActions';
import sdk from '../../index';
import dis from '../../dispatcher';
@ -62,8 +65,8 @@ const TagPanel = React.createClass({
this.setState({orderedGroupTagProfiles});
});
});
this._fetchJoinedRooms();
// This could be done by anything with a matrix client
GroupActions.fetchJoinedGroups(this.context.matrixClient);
},
componentWillUnmount() {
@ -76,7 +79,7 @@ const TagPanel = React.createClass({
_onGroupMyMembership() {
if (this.unmounted) return;
this._fetchJoinedRooms();
GroupActions.fetchJoinedGroups(this.context.matrixClient);
},
onClick() {
@ -88,16 +91,6 @@ const TagPanel = React.createClass({
dis.dispatch({action: 'view_create_group'});
},
async _fetchJoinedRooms() {
// This could be done by anything with a matrix client (, see TagOrderStore).
const joinedGroupResponse = await this.context.matrixClient.getJoinedGroups();
const joinedGroupIds = joinedGroupResponse.groups;
dis.dispatch({
action: 'all_tags',
tags: joinedGroupIds,
});
},
render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const TintableSvg = sdk.getComponent('elements.TintableSvg');

View File

@ -52,10 +52,10 @@ class TagOrderStore extends Store {
this._setState({orderedTags});
}
break;
// Initialise the state such that if account data is unset, default to the existing ordering
case 'all_tags':
// Initialise the state such that if account data is unset, default to joined groups
case 'GroupActions.fetchJoinedGroups.success':
this._setState({
allTags: payload.tags.sort(), // Sort lexically
allTags: payload.result.groups.sort(), // Sort lexically
});
break;
// Puts payload.tag at payload.targetTag, placing the targetTag before or after the tag