teratail
回答率
85.30%
質問するログイン新規登録
トップReduxに関する質問State が変わらない問題 dispatch from react-hook-form

編集履歴

回答編集履歴

13

テキスト修正

2019/12/07 14:38

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,14 +1,12 @@
1
1
  こんにちは
2
2
 
3
- フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持させる意図と思われましたが、そうだとすると、`Sample`の`this.state` にも `mode`を重複して持つ必要はないと思われます。
3
+ フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持させる意図と思われましたが、そうだとすると、`Sample`の`this.state` にも `mode`を重複して持つ必要はないと思われます。 `this.state` に `mode` を持たせなくても、`Sample` では
4
-
5
- `Sample` では
6
4
  ```javascript
7
5
  export default connect((state)=>state)(Sample);
8
6
  ```
9
- によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使えばよいかと思います。
7
+ によってreduxとconnectされることにより、`this.props` に redux の state が入ってきますので、これを使えばよいです。
10
8
 
11
- 下記にいくつかの`Sample`の修正版を挙げます。これらは、リデューサーが`pageReducer` しかなく、Reduxのstoreが以下
9
+ この考え方にそって、下記にいくつかの`Sample`の修正版を挙げます。これらは、リデューサーが`pageReducer` しかなく、Reduxのstoreが以下
12
10
 
13
11
  ```javascript
14
12
  const store = createStore(pageReducer);

12

テキスト修正

2019/12/07 14:38

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -82,12 +82,11 @@
82
82
  ```
83
83
 
84
84
  でも良いかと思います。
85
+ 下記に動作確認用のサンプルを作りました。
85
86
 
86
- 以下のサンプル
87
-
88
87
  - **動作確認用サンプル： **[https://codesandbox.io/s/q227869-3q91g](https://codesandbox.io/s/q227869-3q91g)
89
88
 
90
- は、ご質問に挙げられているコードを転記して各ファイルを作成して、`Sample` については上記の各修正版を追加し、足りないものは当方で補ったものです。
89
+ これは、ご質問に挙げられているコードを転記して各ファイルを作成し、`Sample` については上記の各修正版を追加して、index.js と comfirmForm.jsは当方で適当に作成して補ったものです。
91
90
 
92
91
 
93
92
 

11

テキスト修正

2019/12/07 14:30

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  こんにちは
2
2
 
3
- フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持させる意図だと思われましたが、そうだとすると、`Sample`の`this.state` にも `mode`を持つ必要はないと思われます。
3
+ フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持させる意図と思われましたが、そうだとすると、`Sample`の`this.state` にも `mode`を重複して持つ必要はないと思われます。
4
4
 
5
5
  `Sample` では
6
6
  ```javascript

10

テキスト修正

2019/12/07 14:24

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -99,6 +99,6 @@
99
99
 
100
100
  具体的なコードの修正方法はさておき、この回答の主旨は、初めに書いたとおり
101
101
 
102
- - `mode` は Redux state にあるのだから、`Sample` の this.state に重複して持つ必要は無いのでは？
102
+ - `mode` は Redux の state にあるのだから、`Sample` の this.state に重複して持つ必要は無いのでは？
103
103
 
104
104
  ということになります

9

テキスト修正

2019/12/07 13:56

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -15,7 +15,7 @@
15
15
  ```
16
16
  によって作られていることを前提にしています。
17
17
 
18
- ### sample.js
18
+ ### sample.js (Sampleクラス修正版その1）
19
19
 
20
20
  ```jsx
21
21
  import React, { Component } from "react";
@@ -42,7 +42,7 @@
42
42
  または、`this.state`を使わないので関数型コンポーネントで書いて
43
43
 
44
44
 
45
- ### sample2.js
45
+ ### sample2.js (Sampleクラス修正版その2）
46
46
  ```jsx
47
47
  import React from "react";
48
48
  import { connect } from "react-redux";
@@ -65,7 +65,7 @@
65
65
  ```
66
66
  さらに短いコードで済ませるとすれば、
67
67
 
68
- ### sample3.js
68
+ ### sample3.js (Sampleクラス修正版その3）
69
69
  ```jsx
70
70
  import React from "react";
71
71
  import { connect } from "react-redux";
@@ -97,8 +97,8 @@
97
97
  ```
98
98
  によって `store`を作っている想定のものですが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。
99
99
 
100
- 具体的なコードの修正方法はさておき、この回答の主旨は
100
+ 具体的なコードの修正方法はさておき、この回答の主旨は、初めに書いたとおり
101
101
 
102
- - `mode` は Redux state にあるのだから、`Sample` の this.state にも持つ必要は無いのでは？
102
+ - `mode` は Redux state にあるのだから、`Sample` の this.state に重複して持つ必要は無いのでは？
103
103
 
104
104
  ということになります

8

テキスト修正

2019/12/07 13:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -89,9 +89,9 @@
89
89
 
90
90
  は、ご質問に挙げられているコードを転記して各ファイルを作成して、`Sample` については上記の各修正版を追加し、足りないものは当方で補ったものです。
91
91
 
92
- 以上、参考になれば幸いです。
93
92
 
93
+
94
- 上記の回答では、冒頭に書いたとおり、リデューサーが `pageReducer` しかなく、
94
+ なお上記に挙げたコードは、冒頭に書いたとおり、リデューサーが `pageReducer` しかなく、
95
95
  ```javascript
96
96
  const store = createStore(pageReducer);
97
97
  ```

7

テキスト修正

2019/12/07 13:04

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -6,9 +6,15 @@
6
6
  ```javascript
7
7
  export default connect((state)=>state)(Sample);
8
8
  ```
9
- によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使って、以下でよいかと思います。
9
+ によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使えばよいかと思います。
10
10
 
11
+ 下記にいくつかの`Sample`の修正版を挙げます。これらは、リデューサーが`pageReducer` しかなく、Reduxのstoreが以下
11
12
 
13
+ ```javascript
14
+ const store = createStore(pageReducer);
15
+ ```
16
+ によって作られていることを前提にしています。
17
+
12
18
  ### sample.js
13
19
 
14
20
  ```jsx
@@ -85,13 +91,11 @@
85
91
 
86
92
  以上、参考になれば幸いです。
87
93
 
88
- ### 補足
89
-
90
- 上記の回答では、codesandboxのサンプルにある index.js のとおり、リデューサーが `pageReducer` しかなく、
94
+ 上記の回答では、冒頭に書いたとおり、リデューサーが `pageReducer` しかなく、
91
95
  ```javascript
92
96
  const store = createStore(pageReducer);
93
97
  ```
94
- という形で `store`を作っていますが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。
98
+ によって `store`を作っている想定のものですが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。
95
99
 
96
100
  具体的なコードの修正方法はさておき、この回答の主旨は
97
101
 

6

テキスト修正

2019/12/07 12:59

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -83,4 +83,18 @@
83
83
 
84
84
  は、ご質問に挙げられているコードを転記して各ファイルを作成して、`Sample` については上記の各修正版を追加し、足りないものは当方で補ったものです。
85
85
 
86
- 以上、参考になれば幸いです。
86
+ 以上、参考になれば幸いです。
87
+
88
+ ### 補足
89
+
90
+ 上記の回答では、codesandboxのサンプルにある index.js のとおり、リデューサーが `pageReducer` しかなく、
91
+ ```javascript
92
+ const store = createStore(pageReducer);
93
+ ```
94
+ という形で `store`を作っていますが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。
95
+
96
+ 具体的なコードの修正方法はさておき、この回答の主旨は
97
+
98
+ - `mode` は Redux state にあるのだから、`Sample` の this.state にも持つ必要は無いのでは？
99
+
100
+ ということになります

5

テキスト修正

2019/12/07 12:41

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -77,6 +77,10 @@
77
77
 
78
78
  でも良いかと思います。
79
79
 
80
- - **動作確認用CodePen： **[https://codesandbox.io/s/q227869-3q91g](https://codesandbox.io/s/q227869-3q91g)
80
+ 以下のサンプル
81
81
 
82
+ - **動作確認用サンプル： **[https://codesandbox.io/s/q227869-3q91g](https://codesandbox.io/s/q227869-3q91g)
83
+
84
+ は、ご質問に挙げられているコードを転記して各ファイルを作成して、`Sample` については上記の各修正版を追加し、足りないものは当方で補ったものです。
85
+
82
86
  以上、参考になれば幸いです。

4

テキスト修正

2019/12/07 12:31

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  こんにちは
2
2
 
3
- フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持しているので、`Sample` の `this.state` の中にさらに重複して `mode`を持つ必要はないと思われます。
3
+ フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持させる意図だと思われましたが、そうだとすると、`Sample`の`this.state` にも `mode`を持つ必要はないと思われます。
4
4
 
5
5
  `Sample` では
6
6
  ```javascript

3

テキスト修正

2019/12/07 12:28

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,12 +1,12 @@
1
1
  こんにちは
2
2
 
3
- フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持しているので、`Sample` の `this.state` の中にさらに `mode`を持つ必要はないと思われます。
3
+ フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持しているので、`Sample` の `this.state` の中にさらに重複して `mode`を持つ必要はないと思われます。
4
4
 
5
5
  `Sample` では
6
6
  ```javascript
7
7
  export default connect((state)=>state)(Sample);
8
8
  ```
9
- によってreduxとconnectされているので、`this.props` に redux state が入ってきますので、以下でよいかと思います。
9
+ によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使って、以下でよいかと思います。
10
10
 
11
11
 
12
12
  ### sample.js

2

テキスト修正

2019/12/07 12:23

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -57,7 +57,7 @@
57
57
  export default connect((state)=>state)(Sample);
58
58
 
59
59
  ```
60
- または
60
+ さらに短いコードで済ませるとすれば、
61
61
 
62
62
  ### sample3.js
63
63
  ```jsx
@@ -66,10 +66,9 @@
66
66
  import InputForm from "./inputForm";
67
67
  import ConfirmForm from "./comfirmForm";
68
68
 
69
- const Sample = ({ mode }) => {
69
+ const Sample = ({ mode }) => (
70
- const Form = mode === 'input' ? InputForm : ConfirmForm;
70
+ mode === 'input' ? <InputForm /> : <ConfirmForm />
71
- return <Form />;
72
- }
71
+ )
73
72
 
74
73
  export default connect((state)=>state)(Sample);
75
74
 

1

テキスト修正

2019/12/07 12:14

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -57,6 +57,25 @@
57
57
  export default connect((state)=>state)(Sample);
58
58
 
59
59
  ```
60
+ または
61
+
62
+ ### sample3.js
63
+ ```jsx
64
+ import React from "react";
65
+ import { connect } from "react-redux";
66
+ import InputForm from "./inputForm";
67
+ import ConfirmForm from "./comfirmForm";
68
+
69
+ const Sample = ({ mode }) => {
70
+ const Form = mode === 'input' ? InputForm : ConfirmForm;
71
+ return <Form />;
72
+ }
73
+
74
+ export default connect((state)=>state)(Sample);
75
+
76
+
77
+ ```
78
+
60
79
  でも良いかと思います。
61
80
 
62
81
  - **動作確認用CodePen： **[https://codesandbox.io/s/q227869-3q91g](https://codesandbox.io/s/q227869-3q91g)