ui/js/page/rewards/index.js

@@ -7,6 +7,7 @@ import {
   selectUserHasEmail,
   selectUserIsVerificationCandidate,
 } from "selectors/user";
+import { doRewardList } from "actions/rewards";
 import RewardsPage from "./view";
 
 const select = state => ({
@@ -17,4 +18,8 @@ const select = state => ({
   isVerificationCandidate: selectUserIsVerificationCandidate(state),
 });
 
-export default connect(select, null)(RewardsPage);
+const perform = dispatch => ({
+  fetchRewards: () => dispatch(doRewardList()),
+});
+
+export default connect(select, perform)(RewardsPage);

ui/js/page/rewards/view.jsx

@@ -29,14 +29,29 @@ const RewardTile = props => {
   );
 };
 
-const RewardsPage = props => {
+class RewardsPage extends React.PureComponent {
+  componentDidMount() {
+    this.fetchRewards(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.fetchRewards(nextProps);
+  }
+
+  fetchRewards(props) {
+    const { fetching, rewards, fetchRewards } = props;
+
+    if (!fetching && Object.keys(rewards).length < 1) fetchRewards();
+  }
+
+  render() {
     const {
       fetching,
       isEligible,
       isVerificationCandidate,
       hasEmail,
       rewards,
-  } = props;
+    } = this.props;
 
     let content,
       isCard = false;
@@ -87,6 +102,7 @@ const RewardsPage = props => {
           : content}
       </main>
     );
-};
+  }
+}
 
 export default RewardsPage;