react-reduxでstateを更新した時に再レンダリングする方法

Question

前提・実現したいこと

react-reduxでstateを更新した時に再レンダリングして画面に描画したいです。

該当のソースコード

index.js

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";

class App extends Component {
  renderResult() {
    console.log(this.props.result);
    if (!this.props.result) {
      return <div>No Result!!!</div>;
    } else {
      return <div>{this.props.result}</div>;
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.props.getGenders}>get genders</button>
        {this.renderResult()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { result: state.result };
};

export default connect(
  mapStateToProps,
  actions
)(App);

action

import axios from "axios";
import { GET_GENDERS } from "./types";

export const getGenders = () => async dispatch => {
  try {
    const response = await axios.get("http://localhost:3090/gender");
    dispatch({ type: GET_GENDERS, payload: response.data });
  } catch (e) {
    console.log("error");
  }
};

reducer

import { GET_GENDERS } from "../actions/types";

const INITIAL_STATE = {
  result: ""
};

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case GET_GENDERS:
      return { ...state, result: action.payload };
    default:
      return state;
  }
}

試したこと

button(getGenders)をクリックした時にAction内でaxiosのリクエストが発行され、reducers側で正しくstateが更新されることは確認できています。（Reduxのstate上はgenders > resultにxmlの結果が格納されています）
上記JavaScriptのthis.renderResult()の箇所でうまく再レンダリングさせて画面上に表示させたいのですが、どのように実装すれば良いでしょうか。
アドバイスいただけると幸いです。

Comments

[jun68ykt]

アクションクリエータとリデューサーのソースコードも質問に追記頂けると、より多くの回答が得られるかもしれません。

[dds]

追記致しました。ありがとうございます！

[jun68ykt]

追記ありがとうございます。どこがおかしいのか見始めていますが、あともう２点だけ確認させてください。(1) たぶん合ってると思いますが念のための確認です。Redux と非同期処理の連携のために、 redux-thunk をお使いでしょうか？ (2) ご質問の中に、「 resultにxmlの結果が格納されています」とあったので、 http://localhost:3090/gender によってXMLが返され、やりたいことは、このレスポンスのXML全体を文字列として redux state の genders.result に入れ、これを画面に <div>で囲って表示したい、ということでよいでしょうか？

[dds]

(1) redux-thunkを利用しています！

```index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk";

import reducers from "./reducers";
import App from "./components/App";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(reduxThunk))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector("#root")
);
```

(2) はい、そうです！正確にはそのxmlの中身を加工して画面に出力、、ということを後ほど実施したいのですが、直近の目標として全て出力することをしたいです！

[jun68ykt]

ご返信ありがとうございます。回答しました。

Answer 1

こんにちは

ここが怪しいのでは？と思うところを回答します。ご質問の中に

（Reduxのstate上はgenders > resultにxmlの結果が格納されています）

とあったので、App をreduxに connect するときの mapStateToProps を以下のように修正してみるといかがでしょうか？

修正前：

const mapStateToProps = state => {
  return { result: state.result };
};

修正後：

const mapStateToProps = state => {
  return { result: state.genders.result };  // state と result の間に genders 追加
};

参考になれば幸いです。

備考

ご質問にあるコードを集めて、Reactアプリを作り、以下に上げておきましたので、参考にしてみてください。

• https://github.com/jun68ykt/q195154

足りない部分はこちらで適宜補いました。またaxios のリクエスト先は mockable.io に適当に作成しました。また、redux-logger を追加して、アクション前後のstateの内容をコンソールで確認できるようにしています。

上記の回答に書いた修正に相当するコミットは、以下です。

• https://git.io/fjasJ

この修正によって、ボタンをクリックすると、レスポンスに入っているXMLが以下のように表示されました。

Comments

[dds]

こちら、ご指摘の内容を修正し、解決いたしました。
jun68yktさん詳しいご解説ありがとうございました。mm

[jun68ykt]

どういたしまして。解決されたようでよかったです ????

Answer 2

Reactでは基本的にComponentに渡ってくるpropsが更新されると再レンダリングされますが、
今回は変更したい部分が単純なJSの関数呼び出しになっているので、最初の１回目にrender関数が実行された際にrenderResultを実行すると、それ以降はpropsが変更されても再レンダリングされない状態になっているようです。

下記のようにすると意図通りに動くかと思います。

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.getGenders}>get genders</button>
        {this.props.result ? <div>{this.props.result}</div> : <div>No Result!!!</div> }
      </div>
    );
  }
}

Comments

[dds]

ご回答ありがとうございます！
変更してみましたが、変化は得られませんでした。stateの変更を常にみてくれるわけではないんですね。
（情報が不足しているとのご指摘もありましたので、actionとreducerの情報も追記致しました）

[gyarasu]

`componentDidUpdate()`を追加して中で適当にconsole.logして、ボタン押したときにコンソールに出力されるか見ていただけますか？
もしかしたらcomponentとredux storeがうまく接続できてないのかもしれません

[dds]

`componentDidUpdate()` を追加してみました！確かに何も出力されないです。。