質問編集履歴
1
action, reducerの情報を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
### 該当のソースコード
|
|
6
6
|
|
|
7
|
+
index.js
|
|
7
8
|
```javascript
|
|
8
9
|
import React, { Component } from "react";
|
|
9
10
|
import { connect } from "react-redux";
|
|
@@ -40,7 +41,40 @@
|
|
|
40
41
|
|
|
41
42
|
```
|
|
42
43
|
|
|
44
|
+
action
|
|
45
|
+
```Javascript
|
|
46
|
+
import axios from "axios";
|
|
47
|
+
import { GET_GENDERS } from "./types";
|
|
48
|
+
|
|
49
|
+
export const getGenders = () => async dispatch => {
|
|
50
|
+
try {
|
|
51
|
+
const response = await axios.get("http://localhost:3090/gender");
|
|
52
|
+
dispatch({ type: GET_GENDERS, payload: response.data });
|
|
53
|
+
} catch (e) {
|
|
54
|
+
console.log("error");
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
reducer
|
|
60
|
+
```javascript
|
|
61
|
+
import { GET_GENDERS } from "../actions/types";
|
|
62
|
+
|
|
63
|
+
const INITIAL_STATE = {
|
|
64
|
+
result: ""
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export default function(state = INITIAL_STATE, action) {
|
|
68
|
+
switch (action.type) {
|
|
69
|
+
case GET_GENDERS:
|
|
70
|
+
return { ...state, result: action.payload };
|
|
71
|
+
default:
|
|
72
|
+
return state;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
43
77
|
### 試したこと
|
|
44
|
-
button(getGenders)をクリックした時にAction内でaxiosのリクエストが発行され、reducers側で正しくstateが更新されることは確認できています。
|
|
78
|
+
button(getGenders)をクリックした時にAction内でaxiosのリクエストが発行され、reducers側で正しくstateが更新されることは確認できています。（Reduxのstate上はgenders > resultにxmlの結果が格納されています）
|
|
45
79
|
上記JavaScriptのthis.renderResult()の箇所でうまく再レンダリングさせて画面上に表示させたいのですが、どのように実装すれば良いでしょうか。
|
|
46
80
|
アドバイスいただけると幸いです。
|