トップ Reduxに関する質問 State が変わらない問題 dispatch from react-hook-form

編集履歴

回答編集履歴

テキスト修正

2019/12/07 14:38

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/12/07 14:38

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -166,9 +166,7 @@
 でも良いかと思います。
-以下のサンプル
+下記に動作確認用のサンプルを作りました。
@@ -176,7 +174,7 @@
-は、ご質問に挙げられているコードを転記して各ファイルを作成して、`Sample` については上記の各修正版を追加し、足りないものは当方で補ったものです。
+これは、ご質問に挙げられているコードを転記して各ファイルを作成し、`Sample` については上記の各修正版を追加して、index.js と comfirmForm.jsは当方で適当に作成して補ったものです。

テキスト修正

2019/12/07 14:30

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/12/07 14:24

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,7 +200,7 @@
-- `mode` は Redux state にあるのだから、`Sample` の this.state に重複して持つ必要は無いのでは？
+- `mode` は Redux の state にあるのだから、`Sample` の this.state に重複して持つ必要は無いのでは？

テキスト修正

2019/12/07 13:56

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -32,7 +32,7 @@
-### sample.js
+### sample.js (Sampleクラス修正版その1）
@@ -86,7 +86,7 @@
-### sample2.js
+### sample2.js (Sampleクラス修正版その2）
 ```jsx
@@ -132,7 +132,7 @@
-### sample3.js
+### sample3.js (Sampleクラス修正版その3）
 ```jsx
@@ -196,11 +196,11 @@
-具体的なコードの修正方法はさておき、この回答の主旨は
+具体的なコードの修正方法はさておき、この回答の主旨は、初めに書いたとおり
-- `mode` は Redux state にあるのだから、`Sample` の this.state にも持つ必要は無いのでは？
+- `mode` は Redux state にあるのだから、`Sample` の this.state に重複して持つ必要は無いのでは？

テキスト修正

2019/12/07 13:54

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -180,11 +180,11 @@
-以上、参考になれば幸いです。
-上記の回答では、冒頭に書いたとおり、リデューサーが `pageReducer` しかなく、
+なお上記に挙げたコードは、冒頭に書いたとおり、リデューサーが `pageReducer` しかなく、
 ```javascript

テキスト修正

2019/12/07 13:04

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -14,9 +14,21 @@
 ```
-によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使って、以下でよいかと思います。
+によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使えばよいかと思います。
+下記にいくつかの`Sample`の修正版を挙げます。これらは、リデューサーが`pageReducer` しかなく、Reduxのstoreが以下
+```javascript
+const store = createStore(pageReducer);
+```
+によって作られていることを前提にしています。
@@ -172,11 +184,7 @@
-### 補足
-上記の回答では、codesandboxのサンプルにある index.js のとおり、リデューサーが `pageReducer` しかなく、
+上記の回答では、冒頭に書いたとおり、リデューサーが `pageReducer` しかなく、
 ```javascript
@@ -184,7 +192,7 @@
 ```
-という形で `store`を作っていますが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。
+によって `store`を作っている想定のものですが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。

テキスト修正

2019/12/07 12:59

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -169,3 +169,31 @@
 以上、参考になれば幸いです。
+### 補足
+上記の回答では、codesandboxのサンプルにある index.js のとおり、リデューサーが `pageReducer` しかなく、
+```javascript
+const store = createStore(pageReducer);
+```
+という形で `store`を作っていますが、tajihiroさんの実際のコードでは、いくつかのリデューサーを`combineReducers`していると思います。その場合は、 各コンポーネントに入ってくる redux state から mode を取り出すために、もうひとつプロパティが必要になると思われます。そこは適宜、ご自身のコードに合わせて頂ければと思います。
+具体的なコードの修正方法はさておき、この回答の主旨は
+- `mode` は Redux state にあるのだから、`Sample` の this.state にも持つ必要は無いのでは？
+ということになります

テキスト修正

2019/12/07 12:41

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -156,7 +156,15 @@
+以下のサンプル
-- **動作確認用CodePen： **[https://codesandbox.io/s/q227869-3q91g](https://codesandbox.io/s/q227869-3q91g)
+- **動作確認用サンプル： **[https://codesandbox.io/s/q227869-3q91g](https://codesandbox.io/s/q227869-3q91g)
+は、ご質問に挙げられているコードを転記して各ファイルを作成して、`Sample` については上記の各修正版を追加し、足りないものは当方で補ったものです。

テキスト修正

2019/12/07 12:31

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト修正

2019/12/07 12:28

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持しているので、`Sample` の `this.state` の中にさらに `mode`を持つ必要はないと思われます。
+フォームが入力の受付中であるか、または確認の表示中であるかという2状態を、redux state の `mode` というプロパティで保持しているので、`Sample` の `this.state` の中にさらに重複して `mode`を持つ必要はないと思われます。
@@ -14,7 +14,7 @@
 ```
-によってreduxとconnectされているので、`this.props` に redux state が入ってきますので、以下でよいかと思います。
+によってreduxとconnectされていることにより、`this.props` に redux の state が入ってきますので、これを使って、以下でよいかと思います。

テキスト修正

2019/12/07 12:23

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -116,7 +116,7 @@
 ```
-または
+さらに短いコードで済ませるとすれば、
@@ -134,13 +134,11 @@
-const Sample = ({ mode }) => {
+const Sample = ({ mode }) => (
-  const Form = mode === 'input' ? InputForm : ConfirmForm;
+  mode === 'input' ? <InputForm /> : <ConfirmForm />
-  return <Form />;
-}
+)

テキスト修正

2019/12/07 12:14

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -116,6 +116,44 @@
 ```
+または
+### sample3.js
+```jsx
+import React from "react";
+import { connect } from "react-redux";
+import InputForm from "./inputForm";
+import ConfirmForm  from "./comfirmForm";
+const Sample = ({ mode }) => {
+  const Form = mode === 'input' ? InputForm : ConfirmForm;
+  return <Form />;
+}
+export default connect((state)=>state)(Sample);
+```
 でも良いかと思います。