teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

action, reducerの情報を追記

2019/06/15 23:23

投稿

dds
dds

スコア11

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
  アドバイスいただけると幸いです。