Refactor Stories to use mapDispatchToProps

Author: easyCZ

README.md

@@ -1,5 +1,5 @@
 ## grpc-web-hacker-news
-An example app implementing a Hacker News reader. This example aims to demonstrate usage of [grpc-web](https://github.com/improbable-eng/grpc-web) with React. It additionally shows how to integrate with Redux.
+An example app implementing a Hacker News reader. This example aims to demonstrate usage of [grpc-web](https://github.com/improbable-eng/grpc-web)(v0.5.0) with React. It additionally shows how to integrate with Redux.
 
 ### Running
 To start both the Go backend server and the frontend React application, run the following:
@@ -67,7 +67,7 @@ export default function (state: StoryState = initialState, action: RootAction):
         };
       }
       return state;
-      
+
     default:
       return state;
   }

app/src/Stories.tsx

@@ -12,21 +12,16 @@ type StoriesProps = {
   stories: Story.AsObject[],
   loading: boolean,
   error: Error | null,
-  dispatch: Dispatch<RootAction>,
   selected: Story.AsObject | null,
+
+  fetchStories: () => void,
+  selectStory: (id: number) => void,
 };
 
 class Stories extends React.Component<StoriesProps, {}> {
 
-  constructor(props: StoriesProps) {
-    super(props);
-    this.state = {
-      selected: null,
-    };
-  }
-
   componentDidMount() {
-    this.props.dispatch(listStories());
+    this.props.fetchStories();
   }
 
   render() {
@@ -39,7 +34,7 @@ class Stories extends React.Component<StoriesProps, {}> {
             <StoryList
               selected={this.props.selected}
               stories={this.props.stories}
-              onStorySelect={(id: number) => this.props.dispatch(selectStory(id))}
+              onStorySelect={this.props.selectStory}
             />
           </Grid.Column>
 
@@ -66,4 +61,15 @@ function mapStateToProps(state: RootState) {
   };
 }
 
-export default connect(mapStateToProps)(Stories);
+function mapDispatchToProps(dispatch: Dispatch<RootAction>) {
+  return {
+    fetchStories: () => {
+      dispatch(listStories());
+    },
+    selectStory: (storyId: number) => {
+      dispatch(selectStory(storyId));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Stories);