State が変わらない問題 dispatch from react-hook-form

Question

react-hook-formを使用して画面遷移をしようとしています。
今回react-hook-formを使用していることで、InputForm内にて、dispatch と setState 実行するべきだと考えています。dispatch はできたのですが、setStateがうまく行きません。

import React, { Component } from "react";
import { connect } from "react-redux";
import InputForm from "./inputForm";
import ConfirmForm  from "./comfirmForm";

class Sample extends Component {
    constructor(props){
        super(props);
        this.state = {
            mode: 'input'
        }
    }

    render() {
        switch (this.state.mode) {
            case 'input':
                return (<InputForm />);
            case 'confirm':
                return (<ConfirmForm />);
            default:
                return (<InputForm />);
        }
    }
}

export default connect((state)=>state)(Sample);

import React  from 'react'
import { connect } from "react-redux";
import useForm from 'react-hook-form'
import {Link} from "react-router-dom";

function InputForm(props) {
    const { register, handleSubmit, watch, errors } = useForm();
    const onSubmit = data => {
        console.log(data);
        props.dispatch({type: 'CONFIRM'});
    };

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <label>Last Name:</label>
                <input type="text" name="last_name" ref={register}/>
                <label>First Name:</label>
                <input type="text" name="first_name" ref={register}/>
                <input type="submit" value="更新"/>
            </form>
            <Link to={"/"}>戻る</Link>
        </div>
    );
}
export default connect((state)=>state)(InputForm);

const initData = {
    mode: 'input'
}

export function pageReducer(state = initData, action){
    console.log('page04Reducer:TYPE: ' + action.type)
    switch (action.type) {
        case 'INPUT':
            return {mode: 'input'};
        case 'CONFIRM':
            return {mode: 'confirm'};
        default:
            return state;
    }
}

とりあえず、コードを眺めてみて、ご指摘があるところがありますでしょうか？
問題点は、setState で、mode が更新できずに、Sample class の render内の制御がうまく行かないことです。

ご指摘お願いします。

Answer 1

こんにちは

フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の mode というプロパティで保持させる意図と思われましたが、そうだとすると、Sampleのthis.state にも modeを重複して持つ必要はないと思われます。 this.state に mode を持たせなくても、Sample では

export default connect((state)=>state)(Sample);

によってreduxとconnectされることにより、this.props に redux の state が入ってきますので、これを使えばよいです。

この考え方にそって、下記にいくつかのSampleの修正版を挙げます。これらは、リデューサーがpageReducer しかなく、Reduxのstoreが以下

const store = createStore(pageReducer);

によって作られていることを前提にしています。

sample.js (Sampleクラス修正版その1）

import React, { Component } from "react";
import { connect } from "react-redux";
import InputForm from "./inputForm";
import ConfirmForm  from "./comfirmForm";

class Sample extends Component {
  render() {
    switch (this.props.mode) {
      case 'input':
        return (<InputForm />);
      case 'confirm':
        return (<ConfirmForm />);
      default:
        return (<ConfirmForm />);
    }
  }
}

export default connect((state)=>state)(Sample);

または、this.stateを使わないので関数型コンポーネントで書いて

sample2.js (Sampleクラス修正版その2）

import React from "react";
import { connect } from "react-redux";
import InputForm from "./inputForm";
import ConfirmForm  from "./comfirmForm";

const Sample = ({ mode }) => {
  switch (mode) {
    case 'input':
      return (<InputForm />);
    case 'confirm':
      return (<ConfirmForm />);
    default:
      return (<ConfirmForm />);
  }
}

export default connect((state)=>state)(Sample);

さらに短いコードで済ませるとすれば、

sample3.js (Sampleクラス修正版その3）

import React from "react";
import { connect } from "react-redux";
import InputForm from "./inputForm";
import ConfirmForm  from "./comfirmForm";

const Sample = ({ mode }) => (
  mode === 'input' ? <InputForm /> : <ConfirmForm />
)

export default connect((state)=>state)(Sample);

でも良いかと思います。
下記に動作確認用のサンプルを作りました。

• **動作確認用サンプル： **https://codesandbox.io/s/q227869-3q91g

これは、ご質問に挙げられているコードを転記して各ファイルを作成し、Sample については上記の各修正版を追加して、index.js と comfirmForm.jsは当方で適当に作成して補ったものです。

なお上記に挙げたコードは、冒頭に書いたとおり、リデューサーが pageReducer しかなく、

const store = createStore(pageReducer);

によって storeを作っている想定のものですが、tajihiroさんの実際のコードでは、いくつかのリデューサーをcombineReducersしていると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。

具体的なコードの修正方法はさておき、この回答の主旨は、初めに書いたとおり

• mode は Redux の state にあるのだから、Sample の this.state に重複して持つ必要は無いのでは？

ということになります

Comments

[tajihiro]

返信おくれました。アドバイスありがとうございます。
jun68yktさんのご指摘理解できました。その上で関数でなく元の`render()`で処理をしたい時に、`this.props.mode`が`undefined`になってしまいます。何かお気づきの点はございますでしょうか？

私のソースコードの不備であるとは思いますが。

```
render() {
switch (this.props.mode)
```

[tajihiro]

一点、私の理解不足ですが、stateの`mode` というプロパティがあるのですね。これが少しややこしくしているようです。例えば、画面表示制御を別のプロパティで行う方が良いのでしょうか？

[tajihiro]

その他、`combineReducers` 等を使用しているのでそれらの影響はあるのでしょうか？

>いくつかのリデューサーをcombineReducersしていると思います。
> その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。

[jun68ykt]

こんにちは
すみません。
私の
> もうひとつプロパティが必要になると思われます。
という書き方が悪かったと思います。

言いたかったことをコードで示します。

たとえばもし、pageReducerのほかに、itemReducer、 userReducer　というリデューサーもあって、createStoreするときに、

const rootReducer = combineReducers({
page: pageReducer,
item: itemReducer,
user: userReducer
});

const store = createStore(rootReducer);

という感じで combineReducers しているとしたら、render でswitchするところが、

switch (this.props.mode)

ではなく、 combineReducers で、pageReducer　を指定しているキーの page を、 this.props と mode の間に追加して、

switch (this.props.page.mode)

としなければならないと思います。

> もうひとつプロパティが必要になると思われます。

と書いたのは、 この例でいうと、this.props　と mode の間に、 もうひとつ　page　を挟む必要があります、という意味でした。

[tajihiro]

できました。とても助かりました。

[jun68ykt]

> できました。
とのことで、よかったです????