質問編集履歴

余計な文言削除

2020/07/08 12:02

投稿

tiiseto

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -32,16 +32,16 @@
 `container`はreact-reduxの`connect()`で接続されたｺﾝﾎﾟｰﾈﾝﾄという意味で話します。
+例えば、
+`store.state`が更新されて、
+Lists.js、Cards.jsが`connect()`で接続されており、それらの`mapStateToProps()`がオブジェクトを返すとします。
 <br>
-例えば、
-`store.state`が更新されて、
-Lists.js、Cards.jsが`connect()`で接続されており、それらの`mapStateToProps()`がオブジェクトを返すとします。
-<br>
 その時、
 両者の`mapStateToProps()`がまったく同じオブジェクト内容を返すとしても、
@@ -54,19 +54,19 @@
 困っています。
-<br>
 私のreact-reduxへの理解は、`store.state`が更新されれば必ずすべての`mapStateToProps()`が実行するものと思っていました。
 しかしどうもこの理解を修正しなくてはいけないようです。
-<br>
 そこで知りたいのが、
 「react-reduxは、`connect()`するコンポーネントをネストの一番上だけに限定して、下位の途中に追加してはいけない仕様なのでしょうか？」ということです。
-<br>
 すこしネットで探してみると、ネストの途中で`connect()`しているコンポーネントを挟んでいるようなコードは見かけます。
@@ -74,7 +74,7 @@
 `store.state`が更新されたらすべての接続された`mapStateToProps()`は実行されるとあります。
-<br>
 この公式の文言は、別々のネスト同士の場合という前提で理解すべきでしょうか？
@@ -82,11 +82,11 @@
 やり方の問題ではあるのでしょうが、どこを修正すればいいのか見当がつきません。
-<br>
 どうかこのことについて詳しい方は、教えてくださいませんでしょうか。
-<br>
@@ -104,7 +104,7 @@
 エラー発生個所 : Cards.js
-<br>
 エラー発生理由 : Cards.jsのmapStateToProps()でstate.cardsが更新されず空オブジェクトのままで、その中身を読み取ろうとしたから。
@@ -690,7 +690,7 @@
 - ネストの上位のmapStateToProp()しか実行されないのはLists.jsやCards.jsに限定された事象なのか？
-<br>
     App.jsをconnect()してmapStateToProps()を定義したら、App.jsのmapStateToProps()が実行されて、Lists.jsのほうは実行されなかったので、限定された事象ではなかった。
@@ -698,7 +698,7 @@
 - store.stateは正しく更新されているのか？
-<br>
     loggerを定義して更新前後のstateをコンソールに出力させましたが、正しく更新されているのは確認できました。
@@ -706,11 +706,11 @@
 - 「mapStateToProps()が実行されない」の定義は？
-<br>
     mapStateToProps()内にconsole.log()を設けました。コンソールに出力されなかった、且つ実際にmapStateToProps()が更新されたstore.stateを受け取っていなかったとき実行されなかったと判断しています。
-<br>

同一ネストに複数コンテナがあるかどうかが問題だと認識したので質問内容を変更しました。

2020/07/08 12:02

投稿

tiiseto

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- react-redux mapStateToProps()が~~親コンポーネントでは~~更新され~~るけど、孫コンポーネントでは更新され~~ない
1	+ react-redux　ネスト下位のcontainerが持つmapStateToPropsが更新されない

test CHANGED Viewed

@@ -1,334 +1,636 @@
-### 前提・実現したいこと
-初めまして。
-reactとreduxなどを使用してtrelloクローンを作成している者です。
-親コンポーネントでは`mapStateToProps()`が更新されるのに、孫コンポーネントでは更新されず困っています。
-親コンポーネント、子コンポーネント、孫コンポーネントとある中で
-親コンポーネントと孫コンポーネントが`mapStateToProps()`を使用しています。
-各ｺﾝﾎﾟｰﾈﾝﾄの`mapStateToProps()`が返すオブジェクトは下記のとおりです。
-```
-/* 両者同じ内容です */
+### 実現したいこと、知りたいこと
+react-redux, react-beautiful-dndを利用してtrelloクローンを作成している初心者です。
+現在、以下のようなネスト構成で開発し始めています
+```
+App.js
+    └─ MainContent.js
+        ├─ Lists.js              // container
+        │    └─ List.js         // presentation
+        │       └ Cards.js      // container
+        │           └ Card.js   // presentation
+        │
+        │
+        └─ AddLists.js          // container
+```
+`container`はreact-reduxの`connect()`で接続されたｺﾝﾎﾟｰﾈﾝﾄという意味で話します。
+<br>
+例えば、
+`store.state`が更新されて、
+Lists.js、Cards.jsが`connect()`で接続されており、それらの`mapStateToProps()`がオブジェクトを返すとします。
+<br>
+その時、
+両者の`mapStateToProps()`がまったく同じオブジェクト内容を返すとしても、
+ネストの上位のファイルの`mapStateToProps()`しか実行されず、
+同じ内容を取得するはずの下位のファイルの`mapStateToProps()`は実行されないので
+下位のファイルでは更新された`store.state`が取得できずに
+困っています。
+<br>
+私のreact-reduxへの理解は、`store.state`が更新されれば必ずすべての`mapStateToProps()`が実行するものと思っていました。
+しかしどうもこの理解を修正しなくてはいけないようです。
+<br>
+そこで知りたいのが、
+「react-reduxは、`connect()`するコンポーネントをネストの一番上だけに限定して、下位の途中に追加してはいけない仕様なのでしょうか？」ということです。
+<br>
+すこしネットで探してみると、ネストの途中で`connect()`しているコンポーネントを挟んでいるようなコードは見かけます。
+react-reduxの公式を見てみても、
+`store.state`が更新されたらすべての接続された`mapStateToProps()`は実行されるとあります。
+<br>
+この公式の文言は、別々のネスト同士の場合という前提で理解すべきでしょうか？
+それとも別のところに問題があるのでしょうか？
+やり方の問題ではあるのでしょうが、どこを修正すればいいのか見当がつきません。
+<br>
+どうかこのことについて詳しい方は、教えてくださいませんでしょうか。
+<br>
+### エラー内容など
+エラー内容：
+```
+TypeError: Cannot read property 'content' of undefined
+```
+エラー発生個所 : Cards.js
+<br>
+エラー発生理由 : Cards.jsのmapStateToProps()でstate.cardsが更新されず空オブジェクトのままで、その中身を読み取ろうとしたから。
+```
 const mapStateToProps = state => {
     return {
-        cards : state.cards,
-        lists : state.lists,
-        listOrder : state.listOrder
-    };
-}
-```
-`store.state.cards`がreducerによって更新されたときに、
-親コンポーネント、孫コンポーネントの`mapStateToProps()`が実行されて
-新たにオブジェクトを返すことを期待したのですが
-親コンポーネントの`mapStateToProps()`は更新されて、
-どういうわけか、
-孫コンポーネントの`mapStateToProps()`は実行されない
-という状況に陥っています。
-```
+        cards: state.cards,         // 更新されなかった
+    }
+}
+```
+### ソースコード
+- store.stateのひな型になるｵﾌﾞｼﾞｪｸﾄ
+```JavaScript
+const initialData = {
+    // StoreCards
+    cards: {
+        // 'card-1': { id: 'card-1', content: 'Take out the garbage' },
+        // 'card-2': { id: 'card-2', content: 'Wtatch my favorite show' },
+        // 'card-3': { id: 'card-3', content: 'Change my phone' },
+        // 'card-4': { id: 'card-4', content: 'Cook dinner' },
+    },
+    lists: {
+        // 'list-1': {
+        //     id: 'list-1',
+        //     title: 'add a list...',
+        //     cardIds: ['card-1', 'card-2', 'card-3'],
+        // },
+        // 'list-2': {
+        //     id: 'list-2',
+        //     title: 'add a list...2',
+        //     cardIds: ['card-4'],
+        // },
+        // 'list-3': {
+        //     id: 'list-3',
+        //     title: 'add a list...3',
+        //     cardIds: ['card-5', 'card-6'],
+        // },
+    },
+    listOrder: [
+        // 'list-1', 'list-2', 'list-3'
+    ],
+}
+export default initialData;
+```
+- reducer/index.js
+    CREATE_NEW_CARDでstateを更新したのちの話です。
+```JaVaScript
+// root reducer
+import * as actionTypes from '../../action_namespace';
+import initialData from '../../initialData';
+const initialState = { ...initialData };
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case actionTypes.CREATE_NEW_CARD:
+            console.log('create new card');
+            if (state.listOrder.includes(action.list)) {
+                const newCards = { ...state.cards };
+                const amountOfCards = Object.keys(newCards).length;
+                newCards[`card-${amountOfCards + 1}`] = {
+                    id: `card-${amountOfCards + 1}`,
+                    content: action.content,
+                };
+                const newLists = { ...state.lists };
+                newLists[action.list].cardIds.push(`card-${amountOfCards + 1}`);
+                return {
+                    ...state,
+                    cards: newCards,
+                    lists: newLists,
+                };
+            }
+            else {
+                return state;
+            }
+        default: return state;
+    }
+}
+export default reducer;
+```
+- App.js
+```
+import React from 'react';
+import { DragDropContext } from 'react-beautiful-dnd';
+import { connect } from 'react-redux';
+import MainContent from './MainContent';
+import classes from './App.module.css';
+import { cardMoveToSameList } from '../store/action';
+import * as actionTypes from '../action_namespace';
+class App extends React.Component {
+    onDragEnd = result => {}
+    render() {
+        return (
+            <DragDropContext onDragEnd={this.onDragEnd}>
+                <div className={classes.App}>
+                    <MainContent />
+                </div>
+            </DragDropContext>
+        );
+    }
+}
+export default App;
+```
+- Lists.js
+```
+import React from 'react';
+import { connect } from 'react-redux';
+import classes from './Lists.module.css';
+import List from './List';
+class Lists extends React.Component {
+    render() {
+        console.log(this.props);
+        let lists = this.props.listOrder.map(list => {
+            return (
+                <List
+                    className={classes.Lists}
+                    key={this.props.lists[list].id}
+                    id={this.props.lists[list].id}
+                    title={this.props.lists[list].title}
+                    listName={list}
+                    cards={this.props.cards}
+                />
+            );
+        });
+        return (
+            <div className={classes.Lists} >
+                {lists}
+            </div>
+        );
+    }
+}
+//　更新される
 const mapStateToProps = state => {
     return {
-        cards : state.cards,            // <-- 孫の方だけ更新されない!
+        cards: state.cards,
-        lists : state.lists,
+        lists: state.lists,
-        listOrder : state.listOrder
+        listOrder: state.listOrder
-    };
-}
+    }
+}
+export default connect(mapStateToProps)(Lists);
 ```
-公式でも、
-接続されているすべての`mapStateToProps()`は、`store.state`の更新時に実行されるとあるのですが
-私の作成しているモノでは孫ｺﾝﾎﾟｰﾈﾝﾄの`mapStateToProps()`は実行されませんでした。
-実現したいことは
-孫コンポーネントの`mapStateToProps()`が、正しく更新された`store.state`を受け取り
-孫コンポーネントに`props`として更新された値が渡され
-それによって孫コンポーネントが再ﾚﾝﾀﾞﾘﾝｸﾞされることです。
-想定した処理順序は、
-reducerが`store.state.cards`のオブジェクトに新規のオブジェクトを加えて`store.state`を更新する
-(正しく更新されているのは確認済)
-↓
-`connect()`で接続されている親コンポーネントの`mapStateToProps()`が実行される
-(正しく更新されているのは確認済)
-↓
-`connect()`で接続されている孫コンポーネントの`mapStateToProps()`が実行される
-(`state.cards`が更新されない)
-↓
-孫コンポーネントが`mapStateToProps()`から返された正しいｵﾌﾞｼﾞｪｸﾄを基に再ﾚﾝﾀﾞﾘﾝｸﾞ
-(`state.cards`が空なのでエラー)
-よろしくお願いします。
-### 発生している問題・エラーメッセージ
-#### エラーメッセージ
-```
-/* ブラウザが吐いたエラー*/
-TypeError: Cannot read property 'content' of undefined
-/* 発生個所 */
-/* src/components/Cards.js */
-<Card
-    key={cardId} id={cardId}
-    content={this.props.cards[cardId].content}  // ここのcontentがundefinedになってしまう。this.props.cardsが空になっているせい
-    index={index}
-/>
-```
-### 該当のソースコード
-```JavaScript
-// store.stateの初期値として渡されるものです
-// コメントアウトされているような内容がreducerによって作成されます
-// 今回はcardsの中身が更新された後の話です
-const initialData = {
-    //
-    cards: {
-        // 'card-1': { id: 'card-1', content: 'Take out the garbage' },
-        // 'card-2': { id: 'card-2', content: 'Wtatch my favorite show' },
-        // 'card-3': { id: 'card-3', content: 'Change my phone' },
-        // 'card-4': { id: 'card-4', content: 'Cook dinner' },
-    },
-    lists: {
-        // 'list-1': {
-        //     id: 'list-1',
-        //     title: 'ToDo',
-        //     cardIds: ['card-1', 'card-2', 'card-3'],         // 各lists[].cardsIdを基にcardsの中から
-        // },
-        // 'list-2': {
-        //     id: 'list-2',
-        //     title: 'Done',
-        //     cardIds: ['card-4'],
-        // },
-        // 'list-3': {
-        //     id: 'list-3',
-        //     title: 'Archive',
-        //     cardIds: ['card-5', 'card-6'],
-        // },
-    },
-    listOrder: [
-        // 'list-1', 'list-2', 'list-3'
-    ],
-}
-export default initialData;
+- List.js
+```
+import React from 'react';
+import Cards from './Cards';
+import classes from './List.module.css';
+const list = props => {
+    return (
+        <div
+            id={props.id} className={classes.List} >
+            <span>{props.title}</span>
+            <Cards listName={props.listName} cards={props.cards} />
+        </div>
+    );
+}
+export default list;
 ```
-```React.js
+- Cards.js
-/* 親コンポーネント */
+```
 import React from 'react';
 import { connect } from 'react-redux';
+import { Droppable } from 'react-beautiful-dnd';
+import DroppableContainer from '../dnd/droppableContainer/droppableContainer';
-import classes from './Lists.module.css';
+import classes from './Cards.module.css';
-import List from './List';
+import Card from './Card';
+import { createNewCard } from '../store/action';
+// @props : List.jsからprops.listNameを引き継ぐ
-class Lists extends React.Component {
+class Cards extends React.Component {
+    state = { inputValue: '' }
+    keyUpHandler = (event) => {
+        const ENTER_KEY = 13;
+        if (event.keyCode === ENTER_KEY
+            && this.state.inputValue !== '') {
+            this.props.onCreateNewCard(this.props.listName, this.state.inputValue);
+            this.setState({ inputValue: '' });
+        }
+    }
+    addCardHandler = () => {
+        if (this.state.inputValue !== '') {
+            this.props.onCreateNewCard(this.props.listName, this.state.inputValue);
+            this.setState({ inputValue: '' });
+        }
+    }
+    onChangeHandler = (event) => {
+        this.setState({ inputValue: event.target.value });
+    }
     render() {
-        let lists = this.props.listOrder.map(list => {
+        // this.props.lists[].cardIdsには要素があるのに、
-            return (
-                <List
-                    key={this.props.lists[list].id}
-                    id={this.props.lists[list].id}
-                    title={this.props.lists[list].title}
+        // this.props.cardsが空ｵﾌﾞｼﾞｪｸﾄなので、
-                    listName={list}
-                />
+        // エラーが起こる
-            );
-        });
+        const cardsComp = this.props.lists[this.props.listName].cardIds.map((cardId, index) => {
         return (
+            <Card
+                key={cardId}
+                id={cardId}
+                content={this.props.cards[cardId].content}      // エラー個所
+                index={index}
+            />
+        )
+    });
+        return (
-            <div className={classes.Lists} >
+            <div className={classes.Cards}>
+                <Droppable droppableId={this.props.listName}>
+                    {(provided, snapshot) => (
+                        <DroppableContainer
+                            innerRef={provided.innerRef}
+                            {...provided.droppableProps}
+                            provided={provided}
+                        >
-                {lists}
+                            {cardsComp}
+                            {provided.placeholder}
+                        </DroppableContainer>
+                    )}
+                </Droppable>
             </div>
@@ -340,202 +642,32 @@
+// store.stateが更新されたのに更新されない
 const mapStateToProps = state => {
     return {
-        cards: state.cards,
+        cards: state.cards,     // state.cardsが更新されない
         lists: state.lists,
-        listOrder: state.listOrder
+        listOrder: state.listOrder,
-    }
+    }
-}
+}
-export default connect(mapStateToProps)(Lists);
-```
-```React.js
-/*
-孫コンポーネント
-このコンポーネントの一つ上の親コンポーネントから、
-listNameというpropsを受け取っています
-*/
-import React from 'react';
-import { connect } from 'react-redux';
-import { Droppable } from 'react-beautiful-dnd';
-import DroppableContainer from '../dnd/droppableContainer/droppableContainer';
-import classes from './Cards.module.css';
-import Card from './Card';
-import Input from '../UI/Input';
-import Button from '../UI/Button';
-import { createNewCard } from '../store/action';
-class Cards extends React.Component {
-    state = { inputValue: '' }
-    keyUpHandler = (event) => {
-        const ENTER_KEY = 13;
-        if (event.keyCode === ENTER_KEY
-            && this.state.inputValue !== '') {
-            this.props.onCreateNewCard(this.props.listName, this.state.inputValue);
-            this.setState({ inputValue: '' });
-            // focus, blurとか操作したい...
-        }
-    }
-    addCardHandler = () => {
-        if (this.state.inputValue !== '') {
-            this.props.onCreateNewCard(this.props.listName, this.state.inputValue);
-            this.setState({ inputValue: '' });
-        }
-    }
-    onChangeHandler = (event) => {
-        this.setState({ inputValue: event.target.value });
-    }
-    render() {
-        const cards = this.props.lists[this.props.listName].cardIds.map((cardId, index) => {
-        return (
-            <Card
-                key={cardId}
-                id={cardId}
-                content={this.props.cards[cardId].content}      // <-- エラー発生個所 cardsが空であるせい
-                index={index}
-            />
-        )
-    });
-        return (
-            <div className={classes.Cards}>
-                <Droppable droppableId={this.props.listName}>
-                    {(provided, snapshot) => (
-                        <DroppableContainer
-                            innerRef={provided.innerRef}
-                            {...provided.droppableProps}
-                            provided={provided}
-                        >
-                            {cards}
-                            {provided.placeholder}
-                        </DroppableContainer>
-                    )}
-                </Droppable>
-            </div>
-        );
-    }
-}
-const mapStateToProps = state => {
+const mapDispatchToProps = dispatch => {
     return {
-        cards: state.cards,             // <-- 更新されず空のオブジェクトのまま
-        lists: state.lists,
-        listOrder: state.listOrder,
-    }
-}
-const mapDispatchToProps = dispatch => {
-    return {
         onCreateNewCard: (list, card) => dispatch(createNewCard(list, card)),
     }
@@ -546,177 +678,53 @@
 export default connect(mapStateToProps, mapDispatchToProps)(Cards);
-```
+```
-```React.js
-/* 子ｺﾝﾎﾟｰﾈﾝﾄ */
-import React from 'react';
-import Cards from './Cards';
-import classes from './List.module.css';
-const list = props => {
-    return (
-        <div
-            id={props.id} className={classes.List} >
-            <span>{props.title}</span>
-            <Cards listName={props.listName} />
-        </div>
-    );
-}
-export default list;
-```
-```JavaScript
-/* reducer */
-import * as actionTypes from '../../action_namespace';
-import initialData from '../../initialData';
-const initialState = { ...initialData };
-const reducer = (state = initialState, action) => {
-    switch (action.type) {
-        case actionTypes.CREATE_NEW_CARD:
-            if (state.listOrder.includes(action.list)) {
-                // 新しいカードを作る
-                const newCards = { ...state.cards };
-                // state.cardsの要素数を確認する
-                const amountOfCards = Object.keys(newCards).length;
-                newCards[`card-${amountOfCards + 1}`] = {
-                    id: `card-${amountOfCards + 1}`,
-                    content: action.content,
-                };
-                // 所属するStore.state.lists.cardIdsへ追加する
-                const newLists = { ...state.lists };
-                newLists[action.list].cardIds.push(`card-${amountOfCards + 1}`);
-                return {
-                    ...state,
-                    cards: newCards,
-                    lists: newLists,
-                };
-            }
-            else {
-                return state;
-            }
-        default: return state;
-    }
-}
-```
-### 試したこと
+### やってみたこと
-- 本当にmapStateToProps()はすべて呼び出されていないのか？
+- ネストの上位のmapStateToProp()しか実行されないのはLists.jsやCards.jsに限定された事象なのか？
+<br>
-   親、孫のmapStateToProps()へconsole.log('map state to props');のように出力しましたが親の方しか呼び出されなかった。  (孫はコンソールに出力されなかった)
+    App.jsをconnect()してmapStateToProps()を定義したら、App.jsのmapStateToProps()が実行されて、Lists.jsのほうは実行されなかったので、限定された事象ではなかった。
 - store.stateは正しく更新されているのか？
+<br>
-        store監視のloggerを設けたが正しく更新されているのは確認できました。
+    loggerを定義して更新前後のstateをコンソールに出力させましたが、正しく更新されているのは確認できました。
-### 補足情報（FW/ツールのバージョンなど）
+- 「mapStateToProps()が実行されない」の定義は？
+<br>
+    mapStateToProps()内にconsole.log()を設けました。コンソールに出力されなかった、且つ実際にmapStateToProps()が更新されたstore.stateを受け取っていなかったとき実行されなかったと判断しています。
+<br>
+### 補足情報
+package.json
-```
+```
+{
-package.json{
+  "dependencies": {
     "react": "^16.13.1",
@@ -730,6 +738,6 @@
     "redux": "^4.0.5"
-}
+  },
-```
+```