Ajax を使った Redux

app/controllers/test_controller.rb

@@ -1,4 +1,10 @@
 class TestController < ApplicationController
   def index
   end
+
+  def ajax
+    render json: {
+        title: 'Bun Bun Hello YouTube!',
+    }
+  end
 end

config/routes.rb

@@ -2,6 +2,8 @@
   root 'test#index'
   resources :test
 
+  get 'ajax' => 'test#ajax'
+
   # React のルーティングを使いたいので記載
   get '*path', to: 'test#index'
 

frontend/src/javascripts/actions/Article.js

@@ -7,3 +7,19 @@ export function updateArticleInfo(updateText) {
     }
 }
 
+export function fetchArticleInfo() {
+    return function (dispatch) {
+        return fetch('/ajax', {
+            credentials: 'include',
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+            }
+        })
+            .then(response => response.json())
+            .then(json => {
+                dispatch(updateArticleInfo(json.title));
+            });
+    }
+}
+

frontend/src/javascripts/components/article/index.js

@@ -15,6 +15,9 @@ class Article extends Component {
                     <input type="text" ref="update_text" name="update_box" />
                     <button onClick={(e) => this.updateArticleInfo(e)}>Update Info</button>
                 </div>
+                <div>
+                    <button onClick={(e) => this.fetchArticleInfo(e)}>Update Info With Ajax</button>
+                </div>
                 {this.props.children}
             </div>
         );
@@ -25,6 +28,11 @@ class Article extends Component {
         const updateText = this.refs.update_text.value;
         dispatch(ArticleActions.updateArticleInfo(updateText));
     }
+
+    fetchArticleInfo(e) {
+        const { dispatch } = this.props;
+        dispatch(ArticleActions.fetchArticleInfo());
+    }
 }
 
 function mapStateToProps(state) {