トップ Reduxに関する質問 ReduxのReducerのリストの更新が上手くいきません

編集履歴

回答編集履歴

あ

2018/03/26 02:51

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -1,4 +1,4 @@
-※当初の質問から大きく内容に変更があったため、回答を一旦、全削除します。
+**※当初の質問から大きく内容に変更があったため、回答を一旦、全削除しました。**
@@ -259,3 +259,25 @@
 その上でも尚、得たい結果に描画の時点でならない場合は、(A)reducerに期待しているデータが渡ってきていない、（B)描画する側でミスってる、のいずれかのバグが更にあるのだと思います。
+> Reducerのロジックについて全然理解していないのですが、
+&
+> reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
+であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。
+2段飛ばし、3段飛ばしの状態で進んでいても非効率かと思いますし、また、その状態で質問をしても、
+的はずれな質問になってしまう可能性が高くなったり、「動くコードに直してくれ」レベルの質問になってしまったり、
+回答を得られたとしても、2段飛ばし、3段飛ばしになっている状態に合わせた回答が寄せられたりして、
+せっかく得られた回答も理解できずに無駄になってしまったりするのかなと思います。

追記

2018/03/26 02:51

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -227,3 +227,35 @@
 APIから新規追加したデータのみ返してもらえるならば、reducerのactionにはその新規データのみが渡ってくるので、それを既存のリストに追加してあげれば良いだけの話かと思います。
+# 追記
+> しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
+しかし、ここでは
+ボタン押す→サーバーに追加→サーバーから全データを取得→描画
+としたいので、以下のコードでは問題が起こります。
+いや、「ボタン押す→サーバーに追加→サーバーから全データを取得→描画」に関係なく、
+単に追加するだけであっても掲載のコードでは実現しないですよね？
+2次元配列のリストがreducerのactionに渡ってくるということなのですから、それが掲載されているreducerのコードの引数になったとして、得たい結果にはならないはずです。また、これが二次元配列ではなく編集前の配列の中にオブジェクトがあるような場合であっても、掲載されているコードでは得たい結果は得られていないはずです。
+なので、まずは「ボタン押す→サーバーに追加→サーバーから全データを取得→描画」のことをreducerから切り離して、
+reducer単体でしっかりと得たい結果が得られるコードにしましょう。これだけで他にバグがないのであれば得たい結果に自然となるはずです。
+その上でも尚、得たい結果に描画の時点でならない場合は、(A)reducerに期待しているデータが渡ってきていない、（B)描画する側でミスってる、のいずれかのバグが更にあるのだと思います。

2018/03/26 02:43

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -98,15 +98,15 @@
     questionList: [
-	{ title: 'title1', message: 'message1' },
+        { title: 'title1', message: 'message1' },
-	{ title: 'title2', message: 'message2' },
+        { title: 'title2', message: 'message2' },
-	{ title: 'title3', message: 'message3' },
+        { title: 'title3', message: 'message3' },
-	{ title: 'title4', message: 'message4' },
+        { title: 'title4', message: 'message4' },
-	{ title: 'title5', message: 'message5' }
+        { title: 'title5', message: 'message5' }
     ]
@@ -118,17 +118,17 @@
     questionList: [
-	{ title: 'title1', message: 'message1' },
+        { title: 'title1', message: 'message1' },
-	{ title: 'title2', message: 'message2' },
+        { title: 'title2', message: 'message2' },
-	{ title: 'title3', message: 'message3' },
+        { title: 'title3', message: 'message3' },
-	{ title: 'title4', message: 'message4' },
+        { title: 'title4', message: 'message4' },
-	{ title: 'title5', message: 'message5' },
+        { title: 'title5', message: 'message5' },
-	{ title: 'title6', message: 'message6' }
+        { title: 'title6', message: 'message6' }
     ]
@@ -148,17 +148,17 @@
       payload: [
-	{ title: 'title1', message: 'message1' },
+        { title: 'title1', message: 'message1' },
-	{ title: 'title2', message: 'message2' },
+        { title: 'title2', message: 'message2' },
-	{ title: 'title3', message: 'message3' },
+        { title: 'title3', message: 'message3' },
-	{ title: 'title4', message: 'message4' },
+        { title: 'title4', message: 'message4' },
-	{ title: 'title5', message: 'message5' },
+        { title: 'title5', message: 'message5' },
-	{ title: 'title6', message: 'message6' }
+        { title: 'title6', message: 'message6' }
       ]
@@ -192,7 +192,7 @@
       payload: [
-	{ title: 'title6', message: 'message6' }
+        { title: 'title6', message: 'message6' }
       ]

ライブラリ無しでディープコピーは面倒なので、サンプルコードでは配列ではなくオブジェクトに変更します。。。

2018/03/25 13:29

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -92,19 +92,21 @@
+  // ディープコピーは面倒なので、サンプルコードでは配列ではなくオブジェクトに変更します。。。
   const initialState = {
     questionList: [
-      ['title1', 'message1'],
+	{ title: 'title1', message: 'message1' },
-      ['title2', 'message2'],
+	{ title: 'title2', message: 'message2' },
-      ['title3', 'message3'],
+	{ title: 'title3', message: 'message3' },
-      ['title4', 'message4'],
+	{ title: 'title4', message: 'message4' },
-      ['title5', 'message5']
+	{ title: 'title5', message: 'message5' }
     ]
@@ -116,17 +118,17 @@
     questionList: [
-      ['title1', 'message1'],
+	{ title: 'title1', message: 'message1' },
-      ['title2', 'message2'],
+	{ title: 'title2', message: 'message2' },
-      ['title3', 'message3'],
+	{ title: 'title3', message: 'message3' },
-      ['title4', 'message4'],
+	{ title: 'title4', message: 'message4' },
-      ['title5', 'message5'],
+	{ title: 'title5', message: 'message5' },
-      ['title6', 'message6'],
+	{ title: 'title6', message: 'message6' }
     ]
@@ -146,17 +148,17 @@
       payload: [
-        ['title1', 'message1'],
+	{ title: 'title1', message: 'message1' },
-        ['title2', 'message2'],
+	{ title: 'title2', message: 'message2' },
-        ['title3', 'message3'],
+	{ title: 'title3', message: 'message3' },
-        ['title4', 'message4'],
+	{ title: 'title4', message: 'message4' },
-        ['title5', 'message5'],
+	{ title: 'title5', message: 'message5' },
-        ['title6', 'message6']
+	{ title: 'title6', message: 'message6' }
       ]
@@ -190,7 +192,7 @@
       payload: [
-        ['title6', 'message6']
+	{ title: 'title6', message: 'message6' }
       ]

2018/03/25 13:27

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -28,7 +28,9 @@
-例えば、掲載されている内容を愚直にreducerのコードにテストコード付きで落とし込むのであれば以下となります。
+例えば、掲載されている内容を元に該当reducerのコードをテストコード付きで書くとしたら以下のようになります。
@@ -38,13 +40,11 @@
 export default function questionListsReducer(state, action) {
-  switch(action.type) {
+  switch (action.type) {
+    //質問文に記載通りのかたち
-    case 'update_all':
+    case "update_all":
       return {
@@ -54,16 +54,28 @@
+    //新規追加データのみreducerに渡ってきた場合
+    case "add_questions":
+      return {
+        questionList: [...state.questionList, ...action.payload]
+      };
     default:
       return state;
   }
 }
 ```
@@ -100,13 +112,9 @@
-  const action = {
+  const expectedResult = {
-    type: 'update_all',
-    // 質問文に書かれていたように全データが渡ってくるとする
-    payload: [
+    questionList: [
       ['title1', 'message1'],
@@ -118,32 +126,10 @@
       ['title5', 'message5'],
-      ['title6', 'message6']
+      ['title6', 'message6'],
     ]
-  }
-  const expectedResult = {
-    questionList:[
-      ['title1', 'message1'],
-      ['title2', 'message2'],
-      ['title3', 'message3'],
-      ['title4', 'message4'],
-      ['title5', 'message5'],
-      ['title6', 'message6'],
-    ]
   };
@@ -152,18 +138,78 @@
+    const action = {
+      type: 'update_all',
+      // 質問文に書かれていたように全データが渡ってくるとする
+      payload: [
+        ['title1', 'message1'],
+        ['title2', 'message2'],
+        ['title3', 'message3'],
+        ['title4', 'message4'],
+        ['title5', 'message5'],
+        ['title6', 'message6']
+      ]
+    }
     const result = questionListsReducer(initialState, action);
     expect(result).toEqual(expectedResult); //test passes.
   });
+  it('should add new questions to the existing questionList', () => {
+    const action = {
+      type: 'add_questions',
+      // 追加した新規データのみ渡ってくるとする
+      payload: [
+        ['title6', 'message6']
+      ]
+    }
+    const result = questionListsReducer(initialState, action);
+    expect(result).toEqual(expectedResult); //test passes.
+  });
 })
 ```
@@ -175,3 +221,7 @@
 新規追加したデータだけAPIサーバーから返してもらうことができるなら、そうした方が良いかと思いますが、全データを取得することが必須なのであれば、単純に上記コードのように、既存のstate内のリストをAPIから取得した全リストに置き換えてしまえば良いだけかと思います。
+APIから新規追加したデータのみ返してもらえるならば、reducerのactionにはその新規データのみが渡ってくるので、それを既存のリストに追加してあげれば良いだけの話かと思います。

2018/03/25 13:16

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -104,6 +104,8 @@
     type: 'update_all',
+    // 質問文に書かれていたように全データが渡ってくるとする
     payload: [
       ['title1', 'message1'],

あ

2018/03/25 12:43

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -1 +1,175 @@
 ※当初の質問から大きく内容に変更があったため、回答を一旦、全削除します。
+> しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
+しかし、ここでは
+ボタン押す→サーバーに追加→サーバーから全データを取得→描画
+としたいので、以下のコードでは問題が起こります。
+いえ、関係ないです。
+質問を追加するボタンのことや、API、データベースのことは一旦忘れてください。
+reducerは現在のstateとactionオブジェクトを引数にとって、新しいstateを返す、または現在のstateをそのまま返す関数にしか過ぎません。
+まず、reducer単体で期待する結果を得られるようにコードを書いてください。
+例えば、掲載されている内容を愚直にreducerのコードにテストコード付きで落とし込むのであれば以下となります。
+// questionListsReducer.js
+```
+export default function questionListsReducer(state, action) {
+  switch(action.type) {
+    case 'update_all':
+      return {
+        questionList: action.payload
+      };
+    default:
+      return state;
+  }
+}
+```
+// questionListsReducer.test.js
+```
+import questionListsReducer from './questionListsReducer';
+describe('questionListsReducer', () => {
+  const initialState = {
+    questionList: [
+      ['title1', 'message1'],
+      ['title2', 'message2'],
+      ['title3', 'message3'],
+      ['title4', 'message4'],
+      ['title5', 'message5']
+    ]
+  }
+  const action = {
+    type: 'update_all',
+    payload: [
+      ['title1', 'message1'],
+      ['title2', 'message2'],
+      ['title3', 'message3'],
+      ['title4', 'message4'],
+      ['title5', 'message5'],
+      ['title6', 'message6']
+    ]
+  }
+  const expectedResult = {
+    questionList:[
+      ['title1', 'message1'],
+      ['title2', 'message2'],
+      ['title3', 'message3'],
+      ['title4', 'message4'],
+      ['title5', 'message5'],
+      ['title6', 'message6'],
+    ]
+  };
+  it('should replace an existing questionList with a new questionList', () => {
+    const result = questionListsReducer(initialState, action);
+    expect(result).toEqual(expectedResult); //test passes.
+  });
+})
+```
+> サーバーから全データを取得
+新規追加したデータだけAPIサーバーから返してもらうことができるなら、そうした方が良いかと思いますが、全データを取得することが必須なのであれば、単純に上記コードのように、既存のstate内のリストをAPIから取得した全リストに置き換えてしまえば良いだけかと思います。

アプデ

2018/03/25 12:37

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -1,207 +1 @@
-ごめんなさい。何を質問されたいのかよく分からなかったです。
-questionListsReducerに渡ってくるactionの中身と、それを踏まえて、どういうstateを返したいのかを追記すると、質問内容がわかりやすくなるかと思います。(dbやviewに関する情報は、reducerの話をする上で不要な情報になると思われます。）
-それよりも、以下のように変更してはダメなのですか？
-#1
-```
-/*
-* InitialState
-===================================*/
-const initialStateQuestionList = {
-    title: null,
-    message: null,
-}
-/*
-* questionListReducer
-===================================*/
-export const questionListReducer = (state = initialStateQuestionList, action) => {
-    switch (action.type) {
-    /*= QuestionPage =========*/
-    case actionTypes.SET_QUESTION_TITLE:
+※当初の質問から大きく内容に変更があったため、回答を一旦、全削除します。
-        if (state.id !== action.id) {
-            return state
-        }
-        return Object.assign({}, state, {
-            title: action.title,
-            message: action.message,
-        })
-    default:
-        return state
-    }
-}
-/*
-* questionListsReducer
-===================================*/
-const initialState = {
-    questionList: [],
-}
-```
-↓
-これは全部削除
-#2
-```
-/*
-* questionListsReducer
-===================================*/
-const initialState = {
-    questionList: [],
-}
-```
-↓
-```
-const initialState = [];
-```
-`questionLists`というより、`questionList`または、`questions`なのではないですか？
-```
-const initialStateQuestionList = {
-    title: null,
-    message: null,
-}
-```
-↑ここは、xxxListと命名されていますが、Listでもなんでもなく、単に１つのquestionですよね？
-なので、`const initialState = [];`で、この中に個々のquestionが入ればよいのでは？
-#3
-```
-    case actionTypes.SET_QUESTION_TITLE:
-        return Object.assign({}, state, {
-            questionList: state.questionList.map(t =>
-                questionListReducer(t, action)
-            )
-        })
-```
-ここでやりたいことは、新しいquestionをquestionListに追加することですか？
-それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では？
-> Reducerのロジックについて全然理解していないのですが、
-&
-> reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
-であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。

2018/03/25 12:26

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -2,6 +2,12 @@
+questionListsReducerに渡ってくるactionの中身と、それを踏まえて、どういうstateを返したいのかを追記すると、質問内容がわかりやすくなるかと思います。(dbやviewに関する情報は、reducerの話をする上で不要な情報になると思われます。）
 それよりも、以下のように変更してはダメなのですか？

あ

2018/03/25 09:50

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -190,4 +190,12 @@
+&
+> reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
 であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。

あ

2018/03/25 09:11

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -183,3 +183,11 @@
 それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では？
+> Reducerのロジックについて全然理解していないのですが、
+であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。

あ

2018/03/25 09:06

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -182,4 +182,4 @@
-それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。
+それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では？