質問編集履歴

1

action, reducerの情報を追記

2019/06/15 23:23

投稿

dds
dds

スコア11

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,8 @@
9
9
  ### 該当のソースコード
10
10
 
11
11
 
12
+
13
+ index.js
12
14
 
13
15
  ```javascript
14
16
 
@@ -82,9 +84,75 @@
82
84
 
83
85
 
84
86
 
87
+ action
88
+
89
+ ```Javascript
90
+
91
+ import axios from "axios";
92
+
93
+ import { GET_GENDERS } from "./types";
94
+
95
+
96
+
97
+ export const getGenders = () => async dispatch => {
98
+
99
+ try {
100
+
101
+ const response = await axios.get("http://localhost:3090/gender");
102
+
103
+ dispatch({ type: GET_GENDERS, payload: response.data });
104
+
105
+ } catch (e) {
106
+
107
+ console.log("error");
108
+
109
+ }
110
+
111
+ };
112
+
113
+ ```
114
+
115
+
116
+
117
+ reducer
118
+
119
+ ```javascript
120
+
121
+ import { GET_GENDERS } from "../actions/types";
122
+
123
+
124
+
125
+ const INITIAL_STATE = {
126
+
127
+ result: ""
128
+
129
+ };
130
+
131
+
132
+
133
+ export default function(state = INITIAL_STATE, action) {
134
+
135
+ switch (action.type) {
136
+
137
+ case GET_GENDERS:
138
+
139
+ return { ...state, result: action.payload };
140
+
141
+ default:
142
+
143
+ return state;
144
+
145
+ }
146
+
147
+ }
148
+
149
+ ```
150
+
151
+
152
+
85
153
  ### 試したこと
86
154
 
87
- button(getGenders)をクリックした時にAction内でaxiosのリクエストが発行され、reducers側で正しくstateが更新されることは確認できています。
155
+ button(getGenders)をクリックした時にAction内でaxiosのリクエストが発行され、reducers側で正しくstateが更新されることは確認できています。(Reduxのstate上はgenders > resultにxmlの結果が格納されています)
88
156
 
89
157
  上記JavaScriptのthis.renderResult()の箇所でうまく再レンダリングさせて画面上に表示させたいのですが、どのように実装すれば良いでしょうか。
90
158