teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

12

2018/03/26 02:51

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,4 +1,4 @@
1
- ※当初の質問から大きく内容に変更があったため、回答を一旦、全削除しま
1
+ **※当初の質問から大きく内容に変更があったため、回答を一旦、全削除しました**
2
2
 
3
3
  > しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
4
4
  しかし、ここでは
@@ -128,4 +128,15 @@
128
128
  なので、まずは「ボタン押す→サーバーに追加→サーバーから全データを取得→描画」のことをreducerから切り離して、
129
129
  reducer単体でしっかりと得たい結果が得られるコードにしましょう。これだけで他にバグがないのであれば得たい結果に自然となるはずです。
130
130
 
131
- その上でも尚、得たい結果に描画の時点でならない場合は、(A)reducerに期待しているデータが渡ってきていない、(B)描画する側でミスってる、のいずれかのバグが更にあるのだと思います。
131
+ その上でも尚、得たい結果に描画の時点でならない場合は、(A)reducerに期待しているデータが渡ってきていない、(B)描画する側でミスってる、のいずれかのバグが更にあるのだと思います。
132
+
133
+ > Reducerのロジックについて全然理解していないのですが、
134
+ &
135
+ > reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
136
+
137
+ であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。
138
+
139
+ 2段飛ばし、3段飛ばしの状態で進んでいても非効率かと思いますし、また、その状態で質問をしても、
140
+ 的はずれな質問になってしまう可能性が高くなったり、「動くコードに直してくれ」レベルの質問になってしまったり、
141
+ 回答を得られたとしても、2段飛ばし、3段飛ばしになっている状態に合わせた回答が寄せられたりして、
142
+ せっかく得られた回答も理解できずに無駄になってしまったりするのかなと思います。

11

追記

2018/03/26 02:51

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -112,4 +112,20 @@
112
112
 
113
113
  新規追加したデータだけAPIサーバーから返してもらうことができるなら、そうした方が良いかと思いますが、全データを取得することが必須なのであれば、単純に上記コードのように、既存のstate内のリストをAPIから取得した全リストに置き換えてしまえば良いだけかと思います。
114
114
 
115
- APIから新規追加したデータのみ返してもらえるならば、reducerのactionにはその新規データのみが渡ってくるので、それを既存のリストに追加してあげれば良いだけの話かと思います。
115
+ APIから新規追加したデータのみ返してもらえるならば、reducerのactionにはその新規データのみが渡ってくるので、それを既存のリストに追加してあげれば良いだけの話かと思います。
116
+
117
+ # 追記
118
+ > しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
119
+ しかし、ここでは
120
+ ボタン押す→サーバーに追加→サーバーから全データを取得→描画
121
+ としたいので、以下のコードでは問題が起こります。
122
+
123
+ いや、「ボタン押す→サーバーに追加→サーバーから全データを取得→描画」に関係なく、
124
+ 単に追加するだけであっても掲載のコードでは実現しないですよね?
125
+
126
+ 2次元配列のリストがreducerのactionに渡ってくるということなのですから、それが掲載されているreducerのコードの引数になったとして、得たい結果にはならないはずです。また、これが二次元配列ではなく編集前の配列の中にオブジェクトがあるような場合であっても、掲載されているコードでは得たい結果は得られていないはずです。
127
+
128
+ なので、まずは「ボタン押す→サーバーに追加→サーバーから全データを取得→描画」のことをreducerから切り離して、
129
+ reducer単体でしっかりと得たい結果が得られるコードにしましょう。これだけで他にバグがないのであれば得たい結果に自然となるはずです。
130
+
131
+ その上でも尚、得たい結果に描画の時点でならない場合は、(A)reducerに期待しているデータが渡ってきていない、(B)描画する側でミスってる、のいずれかのバグが更にあるのだと思います。

10

a

2018/03/26 02:43

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -48,22 +48,22 @@
48
48
  // ディープコピーは面倒なので、サンプルコードでは配列ではなくオブジェクトに変更します。。。
49
49
  const initialState = {
50
50
  questionList: [
51
- { title: 'title1', message: 'message1' },
51
+ { title: 'title1', message: 'message1' },
52
- { title: 'title2', message: 'message2' },
52
+ { title: 'title2', message: 'message2' },
53
- { title: 'title3', message: 'message3' },
53
+ { title: 'title3', message: 'message3' },
54
- { title: 'title4', message: 'message4' },
54
+ { title: 'title4', message: 'message4' },
55
- { title: 'title5', message: 'message5' }
55
+ { title: 'title5', message: 'message5' }
56
56
  ]
57
57
  }
58
58
 
59
59
  const expectedResult = {
60
60
  questionList: [
61
- { title: 'title1', message: 'message1' },
61
+ { title: 'title1', message: 'message1' },
62
- { title: 'title2', message: 'message2' },
62
+ { title: 'title2', message: 'message2' },
63
- { title: 'title3', message: 'message3' },
63
+ { title: 'title3', message: 'message3' },
64
- { title: 'title4', message: 'message4' },
64
+ { title: 'title4', message: 'message4' },
65
- { title: 'title5', message: 'message5' },
65
+ { title: 'title5', message: 'message5' },
66
- { title: 'title6', message: 'message6' }
66
+ { title: 'title6', message: 'message6' }
67
67
  ]
68
68
  };
69
69
 
@@ -73,12 +73,12 @@
73
73
  type: 'update_all',
74
74
  // 質問文に書かれていたように全データが渡ってくるとする
75
75
  payload: [
76
- { title: 'title1', message: 'message1' },
76
+ { title: 'title1', message: 'message1' },
77
- { title: 'title2', message: 'message2' },
77
+ { title: 'title2', message: 'message2' },
78
- { title: 'title3', message: 'message3' },
78
+ { title: 'title3', message: 'message3' },
79
- { title: 'title4', message: 'message4' },
79
+ { title: 'title4', message: 'message4' },
80
- { title: 'title5', message: 'message5' },
80
+ { title: 'title5', message: 'message5' },
81
- { title: 'title6', message: 'message6' }
81
+ { title: 'title6', message: 'message6' }
82
82
  ]
83
83
  }
84
84
 
@@ -95,7 +95,7 @@
95
95
  type: 'add_questions',
96
96
  // 追加した新規データのみ渡ってくるとする
97
97
  payload: [
98
- { title: 'title6', message: 'message6' }
98
+ { title: 'title6', message: 'message6' }
99
99
  ]
100
100
  }
101
101
 

9

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

2018/03/25 13:29

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -45,24 +45,25 @@
45
45
 
46
46
  describe('questionListsReducer', () => {
47
47
 
48
+ // ディープコピーは面倒なので、サンプルコードでは配列ではなくオブジェクトに変更します。。。
48
49
  const initialState = {
49
50
  questionList: [
50
- ['title1', 'message1'],
51
+ { title: 'title1', message: 'message1' },
51
- ['title2', 'message2'],
52
+ { title: 'title2', message: 'message2' },
52
- ['title3', 'message3'],
53
+ { title: 'title3', message: 'message3' },
53
- ['title4', 'message4'],
54
+ { title: 'title4', message: 'message4' },
54
- ['title5', 'message5']
55
+ { title: 'title5', message: 'message5' }
55
56
  ]
56
57
  }
57
58
 
58
59
  const expectedResult = {
59
60
  questionList: [
60
- ['title1', 'message1'],
61
+ { title: 'title1', message: 'message1' },
61
- ['title2', 'message2'],
62
+ { title: 'title2', message: 'message2' },
62
- ['title3', 'message3'],
63
+ { title: 'title3', message: 'message3' },
63
- ['title4', 'message4'],
64
+ { title: 'title4', message: 'message4' },
64
- ['title5', 'message5'],
65
+ { title: 'title5', message: 'message5' },
65
- ['title6', 'message6'],
66
+ { title: 'title6', message: 'message6' }
66
67
  ]
67
68
  };
68
69
 
@@ -72,12 +73,12 @@
72
73
  type: 'update_all',
73
74
  // 質問文に書かれていたように全データが渡ってくるとする
74
75
  payload: [
75
- ['title1', 'message1'],
76
+ { title: 'title1', message: 'message1' },
76
- ['title2', 'message2'],
77
+ { title: 'title2', message: 'message2' },
77
- ['title3', 'message3'],
78
+ { title: 'title3', message: 'message3' },
78
- ['title4', 'message4'],
79
+ { title: 'title4', message: 'message4' },
79
- ['title5', 'message5'],
80
+ { title: 'title5', message: 'message5' },
80
- ['title6', 'message6']
81
+ { title: 'title6', message: 'message6' }
81
82
  ]
82
83
  }
83
84
 
@@ -94,7 +95,7 @@
94
95
  type: 'add_questions',
95
96
  // 追加した新規データのみ渡ってくるとする
96
97
  payload: [
97
- ['title6', 'message6']
98
+ { title: 'title6', message: 'message6' }
98
99
  ]
99
100
  }
100
101
 

8

a

2018/03/25 13:27

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -13,24 +13,30 @@
13
13
 
14
14
  まず、reducer単体で期待する結果を得られるようにコードを書いてください。
15
15
 
16
- 例えば、掲載されている内容を愚直にreducerのコードテストコード付きでとし込むのであれば以下なります。
16
+ 例えば、掲載されている内容を該当reducerのコードテストコード付きで書くとしたら以下のようになります。
17
17
 
18
+
18
19
  // questionListsReducer.js
19
20
  ```
20
21
  export default function questionListsReducer(state, action) {
21
-
22
- switch(action.type) {
22
+ switch (action.type) {
23
-
23
+ //質問文に記載通りのかたち
24
- case 'update_all':
24
+ case "update_all":
25
25
  return {
26
26
  questionList: action.payload
27
27
  };
28
28
 
29
+ //新規追加データのみreducerに渡ってきた場合
30
+ case "add_questions":
31
+ return {
32
+ questionList: [...state.questionList, ...action.payload]
33
+ };
34
+
29
35
  default:
30
36
  return state;
31
37
  }
32
-
33
38
  }
39
+
34
40
  ```
35
41
 
36
42
  // questionListsReducer.test.js
@@ -49,21 +55,8 @@
49
55
  ]
50
56
  }
51
57
 
52
- const action = {
53
- type: 'update_all',
54
- // 質問文に書かれていたように全データが渡ってくるとする
55
- payload: [
56
- ['title1', 'message1'],
57
- ['title2', 'message2'],
58
- ['title3', 'message3'],
59
- ['title4', 'message4'],
60
- ['title5', 'message5'],
61
- ['title6', 'message6']
62
- ]
63
- }
64
-
65
58
  const expectedResult = {
66
- questionList:[
59
+ questionList: [
67
60
  ['title1', 'message1'],
68
61
  ['title2', 'message2'],
69
62
  ['title3', 'message3'],
@@ -75,15 +68,47 @@
75
68
 
76
69
  it('should replace an existing questionList with a new questionList', () => {
77
70
 
71
+ const action = {
72
+ type: 'update_all',
73
+ // 質問文に書かれていたように全データが渡ってくるとする
74
+ payload: [
75
+ ['title1', 'message1'],
76
+ ['title2', 'message2'],
77
+ ['title3', 'message3'],
78
+ ['title4', 'message4'],
79
+ ['title5', 'message5'],
80
+ ['title6', 'message6']
81
+ ]
82
+ }
83
+
78
84
  const result = questionListsReducer(initialState, action);
79
85
 
80
86
  expect(result).toEqual(expectedResult); //test passes.
81
-
87
+
82
88
  });
83
89
 
90
+
91
+ it('should add new questions to the existing questionList', () => {
92
+
93
+ const action = {
94
+ type: 'add_questions',
95
+ // 追加した新規データのみ渡ってくるとする
96
+ payload: [
97
+ ['title6', 'message6']
98
+ ]
99
+ }
100
+
101
+ const result = questionListsReducer(initialState, action);
102
+
103
+ expect(result).toEqual(expectedResult); //test passes.
104
+
105
+ });
106
+
84
107
  })
85
108
  ```
86
109
 
87
110
  > サーバーから全データを取得
88
111
 
89
- 新規追加したデータだけAPIサーバーから返してもらうことができるなら、そうした方が良いかと思いますが、全データを取得することが必須なのであれば、単純に上記コードのように、既存のstate内のリストをAPIから取得した全リストに置き換えてしまえば良いだけかと思います。
112
+ 新規追加したデータだけAPIサーバーから返してもらうことができるなら、そうした方が良いかと思いますが、全データを取得することが必須なのであれば、単純に上記コードのように、既存のstate内のリストをAPIから取得した全リストに置き換えてしまえば良いだけかと思います。
113
+
114
+ APIから新規追加したデータのみ返してもらえるならば、reducerのactionにはその新規データのみが渡ってくるので、それを既存のリストに追加してあげれば良いだけの話かと思います。

7

a

2018/03/25 13:16

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -51,6 +51,7 @@
51
51
 
52
52
  const action = {
53
53
  type: 'update_all',
54
+ // 質問文に書かれていたように全データが渡ってくるとする
54
55
  payload: [
55
56
  ['title1', 'message1'],
56
57
  ['title2', 'message2'],

6

2018/03/25 12:43

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,1 +1,88 @@
1
- ※当初の質問から大きく内容に変更があったため、回答を一旦、全削除します。
1
+ ※当初の質問から大きく内容に変更があったため、回答を一旦、全削除します。
2
+
3
+ > しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
4
+ しかし、ここでは
5
+ ボタン押す→サーバーに追加→サーバーから全データを取得→描画
6
+ としたいので、以下のコードでは問題が起こります。
7
+
8
+ いえ、関係ないです。
9
+
10
+ 質問を追加するボタンのことや、API、データベースのことは一旦忘れてください。
11
+
12
+ reducerは現在のstateとactionオブジェクトを引数にとって、新しいstateを返す、または現在のstateをそのまま返す関数にしか過ぎません。
13
+
14
+ まず、reducer単体で期待する結果を得られるようにコードを書いてください。
15
+
16
+ 例えば、掲載されている内容を愚直にreducerのコードにテストコード付きで落とし込むのであれば以下となります。
17
+
18
+ // questionListsReducer.js
19
+ ```
20
+ export default function questionListsReducer(state, action) {
21
+
22
+ switch(action.type) {
23
+
24
+ case 'update_all':
25
+ return {
26
+ questionList: action.payload
27
+ };
28
+
29
+ default:
30
+ return state;
31
+ }
32
+
33
+ }
34
+ ```
35
+
36
+ // questionListsReducer.test.js
37
+ ```
38
+ import questionListsReducer from './questionListsReducer';
39
+
40
+ describe('questionListsReducer', () => {
41
+
42
+ const initialState = {
43
+ questionList: [
44
+ ['title1', 'message1'],
45
+ ['title2', 'message2'],
46
+ ['title3', 'message3'],
47
+ ['title4', 'message4'],
48
+ ['title5', 'message5']
49
+ ]
50
+ }
51
+
52
+ const action = {
53
+ type: 'update_all',
54
+ payload: [
55
+ ['title1', 'message1'],
56
+ ['title2', 'message2'],
57
+ ['title3', 'message3'],
58
+ ['title4', 'message4'],
59
+ ['title5', 'message5'],
60
+ ['title6', 'message6']
61
+ ]
62
+ }
63
+
64
+ const expectedResult = {
65
+ questionList:[
66
+ ['title1', 'message1'],
67
+ ['title2', 'message2'],
68
+ ['title3', 'message3'],
69
+ ['title4', 'message4'],
70
+ ['title5', 'message5'],
71
+ ['title6', 'message6'],
72
+ ]
73
+ };
74
+
75
+ it('should replace an existing questionList with a new questionList', () => {
76
+
77
+ const result = questionListsReducer(initialState, action);
78
+
79
+ expect(result).toEqual(expectedResult); //test passes.
80
+
81
+ });
82
+
83
+ })
84
+ ```
85
+
86
+ > サーバーから全データを取得
87
+
88
+ 新規追加したデータだけAPIサーバーから返してもらうことができるなら、そうした方が良いかと思いますが、全データを取得することが必須なのであれば、単純に上記コードのように、既存のstate内のリストをAPIから取得した全リストに置き換えてしまえば良いだけかと思います。

5

アプデ

2018/03/25 12:37

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,104 +1,1 @@
1
- ごめんなさい。何を質問されたいのかよく分からなかったです。
2
-
3
- questionListsReducerに渡ってくるactionの中身と、それを踏まえて、どういうstateを返したいのかを追記すると、質問内容がわかりやすくなるかと思います。(dbやviewに関する情報は、reducerの話をする上で不要な情報になると思われます。)
4
-
5
-
6
- それよりも、以下のように変更してはダメなのですか?
7
-
8
-
9
- #1
10
-
11
- ```
12
- /*
13
- * InitialState
14
- ===================================*/
15
- const initialStateQuestionList = {
16
- title: null,
17
- message: null,
18
- }
19
-
20
- /*
21
- * questionListReducer
22
- ===================================*/
23
- export const questionListReducer = (state = initialStateQuestionList, action) => {
24
- switch (action.type) {
25
- /*= QuestionPage =========*/
26
- case actionTypes.SET_QUESTION_TITLE:
1
+ ※当初の質問から大きく内容に変更があったため、回答を一旦、全削除します。
27
- if (state.id !== action.id) {
28
- return state
29
- }
30
- return Object.assign({}, state, {
31
- title: action.title,
32
- message: action.message,
33
- })
34
-
35
- default:
36
- return state
37
- }
38
- }
39
-
40
- /*
41
- * questionListsReducer
42
- ===================================*/
43
- const initialState = {
44
- questionList: [],
45
- }
46
-
47
- ```
48
-
49
-
50
- これは全部削除
51
-
52
-
53
- #2
54
- ```
55
- /*
56
- * questionListsReducer
57
- ===================================*/
58
- const initialState = {
59
- questionList: [],
60
- }
61
-
62
- ```
63
-
64
-
65
-
66
- ```
67
- const initialState = [];
68
- ```
69
-
70
- `questionLists`というより、`questionList`または、`questions`なのではないですか?
71
-
72
- ```
73
- const initialStateQuestionList = {
74
- title: null,
75
- message: null,
76
- }
77
- ```
78
- ↑ここは、xxxListと命名されていますが、Listでもなんでもなく、単に1つのquestionですよね?
79
-
80
- なので、`const initialState = [];`で、この中に個々のquestionが入ればよいのでは?
81
-
82
-
83
-
84
- #3
85
- ```
86
- case actionTypes.SET_QUESTION_TITLE:
87
- return Object.assign({}, state, {
88
- questionList: state.questionList.map(t =>
89
- questionListReducer(t, action)
90
- )
91
- })
92
- ```
93
-
94
- ここでやりたいことは、新しいquestionをquestionListに追加することですか?
95
-
96
- それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では?
97
-
98
- > Reducerのロジックについて全然理解していないのですが、
99
-
100
- &
101
-
102
- > reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
103
-
104
- であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。

4

a

2018/03/25 12:26

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,5 +1,8 @@
1
1
  ごめんなさい。何を質問されたいのかよく分からなかったです。
2
2
 
3
+ questionListsReducerに渡ってくるactionの中身と、それを踏まえて、どういうstateを返したいのかを追記すると、質問内容がわかりやすくなるかと思います。(dbやviewに関する情報は、reducerの話をする上で不要な情報になると思われます。)
4
+
5
+
3
6
  それよりも、以下のように変更してはダメなのですか?
4
7
 
5
8
 

3

2018/03/25 09:50

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -94,4 +94,8 @@
94
94
 
95
95
  > Reducerのロジックについて全然理解していないのですが、
96
96
 
97
+ &
98
+
99
+ > reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
100
+
97
101
  であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。

2

2018/03/25 09:11

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -90,4 +90,8 @@
90
90
 
91
91
  ここでやりたいことは、新しいquestionをquestionListに追加することですか?
92
92
 
93
- それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では?
93
+ それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では?
94
+
95
+ > Reducerのロジックについて全然理解していないのですが、
96
+
97
+ であれば、まずはそこを理解するように努めてから先へ進んだ方が効率も良いのではないでしょうか。

1

2018/03/25 09:06

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -90,4 +90,4 @@
90
90
 
91
91
  ここでやりたいことは、新しいquestionをquestionListに追加することですか?
92
92
 
93
- それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。
93
+ それであれば、initialStateを`[]`に前述の通り変更することで、あとは、stateをコピーして、新しいquestionをその配列に加えて、新しいstateを返すだけの話ですよ。なので、`questionListReducer`は不要では?