example

client/.eslintrc.js

@@ -2,7 +2,8 @@ module.exports = {
     parser: 'babel-eslint',
     extends: ["eslint:recommended", "plugin:react/recommended"],
     "env": {
-      "browser": true
+      "browser": true,
+      "es6": true
     },
     parserOptions: {
         "sourceType": 'module',

client/actions/group.js

@@ -6,9 +6,13 @@ import {
 export function fetchGroupList() {
   return {
     type: FETCH_GROUP_LIST,
-    payload: {
-      data: ['MFE', 'Hotel', 'Vacation', 'Flight', 'Pay']
-    }
+    // payload 可以返回 Promise，异步请求使用 axios 即可
+    payload: new Promise((resolve) => {
+      resolve({
+        data: ['Hotel', 'Vacation', 'Flight', 'Pay'],
+        res: true
+      })
+    })
   }
 }
 

client/containers/ProjectGroups/GroupList/GroupList.js

@@ -24,14 +24,20 @@ import './GroupList.scss'
   }
 )
 export default class GroupList extends Component {
-  constructor(props) {
-    super(props)
-  }
 
   static propTypes = {
     groupList: PropTypes.array,
     currGroup: PropTypes.string,
-    addGroup: PropTypes.func
+    addGroup: PropTypes.func,
+    fetchGroupList: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount() {
+    this.props.fetchGroupList();
   }
 
   @autobind

client/reducer/group/group.js

@@ -4,7 +4,7 @@ import {
 } from '../../constants/action-types';
 
 const initialState = {
-  groupList: ['Hotel', 'Vacation', 'Flight', 'Pay'],
+  groupList: [],
   currGroup: 'MFE'
 };