teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問FirebaseでソートしてFetchしたい（redux）

編集履歴

質問編集履歴

3

全体的に修正しました

2018/04/25 04:04

投稿

yamady
yamady

スコア176

test CHANGED
File without changes
test CHANGED
@@ -1,35 +1,117 @@
1
- いつも大変お世話になっておりますmm
2
-
3
-
4
-
5
- reduxを使って、Firebaseの中身をFetchして取ってきたいと考えています。
1
+ Firebaseから、指定したカラム（作成日）の昇順でFetchしたいと考えています。
6
-
2
+
3
+
4
+
7
- 色々と試してみたものの、どうしてもランダムな順番になったり、エラーが表示されてしまいます。
5
+ [こちら公式のドキュメント](https://firebase.google.com/docs/database/web/lists-of-data)にあるように、orderByKey()や、orderByChild()を使ってみたのですが、思った通りに表示されずに困っています。
8
-
9
-
10
-
11
- #### 開発環境
6
+
12
-
13
- react-native: 0.52.3
7
+
14
-
15
- redux: 3.7.2
8
+
16
-
17
-
18
-
19
- #### クエリ
20
-
21
-
22
-
23
- ![クエリ](66f7d22af34d0cb0f033ceed7cf14a62.png)
24
-
25
-
26
-
27
- #### view側のソースコード
9
+ #### エラー＆ソースコード
10
+
11
+
12
+
13
+ (1) reduxでconsole.log()をしてみると、順番通りにsnapshotが取ってこれているのですが、
28
14
 
29
15
 
30
16
 
31
17
  ```JavaScript
32
18
 
19
+ export const messagesFetch = (room) => {
20
+
21
+ return (dispatch) => {
22
+
23
+ firebase.database().ref(`/rooms/${room.roomId}/messages`)
24
+
25
+ .orderByChild('createdAt')
26
+
27
+ .on('value', snapshot => {
28
+
29
+ console.log('順番（messageActions.js）', snapshot)
30
+
31
+ dispatch({ type: 'messages_fetch_success', payload: snapshot.val() });
32
+
33
+ })
34
+
35
+ };
36
+
37
+ };
38
+
39
+ ```
40
+
41
+
42
+
43
+ ```
44
+
45
+ 順番（messageActions.js）
46
+
47
+
48
+
49
+ Snapshot {key: "messages", ref: Reference, _value: {…}, _priority: null, _childKeys: Array(5)}
50
+
51
+
52
+
53
+ key: "messages"
54
+
55
+
56
+
57
+ ref: Reference {_module: Database, path: "/rooms/XXXXXX/messages", _promise: null, _refListeners: {…}, _database: Database, …}
58
+
59
+
60
+
61
+ _childKeys:(5) ["-LAuoHzKSCT2hux0TC1O", "-LAuoLwIMD-523OpNrQi", "-LAuoOGawyAVT3ln5j6m", "-LAuoS2QjGhs6NtjAPv_", "-LAusvIn-gyO4ZYNAZ7Z"]
62
+
63
+
64
+
65
+ _value:
66
+
67
+ - LAuoHzKSCT2hux0TC1O:
68
+
69
+ - createdAt:"2018/04/24 20:20"
70
+
71
+ - text:"1番初めのメッセージです"
72
+
73
+
74
+
75
+ - LAuoLwIMD-523OpNrQi:
76
+
77
+ - createdAt: "2018/04/24 20:20"
78
+
79
+ - text: "2番目のメッセージです"
80
+
81
+
82
+
83
+ - LAuoOGawyAVT3ln5j6m:
84
+
85
+ - createdAt: "2018/04/24 20:21"
86
+
87
+ - text: "3番目のメッセージです"
88
+
89
+
90
+
91
+ -LAuoS2QjGhs6NtjAPv_:
92
+
93
+ - createdAt: "2018/04/24 20:21"
94
+
95
+ - text: "4番目のメッセージです"
96
+
97
+
98
+
99
+ -LAusvIn-gyO4ZYNAZ7Z:
100
+
101
+ - createdAt: "2018/04/24 20:40"
102
+
103
+ - text:"5番目のメッセージです"
104
+
105
+ ```
106
+
107
+
108
+
109
+ (2) MAessage.jsの方へfetchされた時に"どういうルールか分からない"順番でソートされます。最初_idかと思ったのですが、よく見ると違い、uidでもなさそうです。分かりません。
110
+
111
+
112
+
113
+ ```JavaScript
114
+
33
115
  class Message extends React.Component {
34
116
 
35
117
  constructor(props) {
@@ -60,6 +142,8 @@
60
142
 
61
143
  const { currentUser } = firebase.auth();
62
144
 
145
+ console.log('順番（Message.js）', this.props.messages);
146
+
63
147
  return (
64
148
 
65
149
  <Screen>
@@ -118,136 +202,22 @@
118
202
 
119
203
 
120
204
 
121
- #### fetchソースコード(1)
122
-
123
-
124
-
125
- ```JavaScript
126
-
127
- export const messagesFetch = (room) => {
128
-
129
- return (dispatch) => {
130
-
131
- firebase.database().ref(`/rooms/${room.roomId}/messages`)
132
-
133
- .orderByChild('createdAt')
134
-
135
- .on('value', snapshot => {
136
-
137
- dispatch({ type: 'messages_fetch_success', payload: snapshot.val() });
138
-
139
- })
140
-
141
- };
142
-
143
- };
144
-
145
- ```
146
-
147
-
148
-
149
- => ランダムにメッセージが表示される
150
-
151
-
152
-
153
- #### fetchソースコード(2)
154
-
155
-
156
-
157
- ```JavaScript
158
-
159
- export const messagesFetch = (room) => {
160
-
161
- return (dispatch) => {
162
-
163
- firebase.database().ref(`/rooms/${room.roomId}/messages`)
164
-
165
- .orderByChild('child')
166
-
167
- .on('child_added', snapshot => {
168
-
169
- dispatch({ type: 'messages_fetch_success', payload: snapshot.val() });
170
-
171
- })
172
-
173
- };
174
-
175
- };
176
-
177
- ```
178
-
179
-
180
-
181
- 下記エラーが表示されます
182
-
183
- ```
184
-
185
- TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.
186
-
187
- ```
188
-
189
-
190
-
191
- #### fetchソースコード(3)
192
-
193
-
194
-
195
- ```JavaScript
196
-
197
- export const messagesFetch = (room) => {
198
-
199
- return (dispatch) => {
200
-
201
- firebase.database().ref(`/rooms/${room.roomId}/messages`)
202
-
203
- .orderByKey()
204
-
205
- .once('value')
206
-
207
- .then(snapshots => {
208
-
209
- snapshots.forEach(snapshot => {
210
-
211
- dispatch({ type: 'messages_fetch_success', payload: snapshot.val() });
212
-
213
-
214
-
215
- return false;
216
-
217
- });
218
-
219
- });
220
-
221
- };
222
-
223
- };
224
-
225
- ```
226
-
227
-
228
-
229
- [データのインデックス](https://firebase.google.com/docs/database/security/indexing-data?hl=ja)も試して、下記のようにルールを変更しましたが、やはりうまくいきませんでした。
230
-
231
-
232
-
233
- ```
234
-
235
- "messages": {
236
-
237
- ".indexOn": "createdAt",
238
-
239
- ".read": "auth !== null",
240
-
241
- ".write": "auth !== null",
242
-
243
- }
244
-
245
- ```
246
-
247
-
248
-
249
- ソースコード(2)と同じエラーが発生しています。
250
-
251
-
252
-
253
- お手すきの際に、もしご存知でしたらどうぞよろしくお願いいたします。
205
+ ```
206
+
207
+ 順番（Message.js）
208
+
209
+
210
+
211
+ (5) [{…}, {…}, {…}, {…}, {…}]
212
+
213
+ 0: {user: {…}, createdAt: "2018/04/24 20:21", _id: 1524626462186, text: "3番目のメッセージです", uid: "-LAuoOGawyAVT3ln5j6m"}
214
+
215
+ 1: {user: {…}, createdAt: "2018/04/24 20:21", _id: 1524626477639, text: "4番目のメッセージです", uid: "-LAuoS2QjGhs6NtjAPv_"}
216
+
217
+ 2: {user: {…}, createdAt: "2018/04/24 20:40", _id: 1524627650612, text: "5番目のメッセージです", uid: "-LAusvIn-gyO4ZYNAZ7Z"}
218
+
219
+ 3: {user: {…}, createdAt: "2018/04/24 20:20", _id: 1524626436230, text: "1番初めのメッセージです", uid: "-LAuoHzKSCT2hux0TC1O"}
220
+
221
+ 4: {user: {…}, createdAt: "2018/04/24 20:20", _id: 1524626452866, text: "2番目のメッセージです", uid: "-LAuoLwIMD-523OpNrQi"}length: 5__proto__: Array(0)
222
+
223
+ ```

2

試してみたことを追記しました

2018/04/25 04:04

投稿

yamady
yamady

スコア176

test CHANGED
File without changes
test CHANGED
@@ -226,6 +226,26 @@
226
226
 
227
227
 
228
228
 
229
+ [データのインデックス](https://firebase.google.com/docs/database/security/indexing-data?hl=ja)も試して、下記のようにルールを変更しましたが、やはりうまくいきませんでした。
230
+
231
+
232
+
233
+ ```
234
+
235
+ "messages": {
236
+
237
+ ".indexOn": "createdAt",
238
+
239
+ ".read": "auth !== null",
240
+
241
+ ".write": "auth !== null",
242
+
243
+ }
244
+
245
+ ```
246
+
247
+
248
+
229
249
  ソースコード(2)と同じエラーが発生しています。
230
250
 
231
251
 

1

view側のコードを追記しました

2018/04/24 19:36

投稿

yamady
yamady

スコア176

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,101 @@
24
24
 
25
25
 
26
26
 
27
+ #### view側のソースコード
28
+
29
+
30
+
31
+ ```JavaScript
32
+
33
+ class Message extends React.Component {
34
+
35
+ constructor(props) {
36
+
37
+ super(props);
38
+
39
+ this.state = {
40
+
41
+ messages: [],
42
+
43
+ };
44
+
45
+ }
46
+
47
+
48
+
49
+ componentWillMount() {
50
+
51
+ const room = this.props.navigation.state.params.room;
52
+
53
+ this.props.messagesFetch(room);
54
+
55
+ }
56
+
57
+
58
+
59
+ render() {
60
+
61
+ const { currentUser } = firebase.auth();
62
+
63
+ return (
64
+
65
+ <Screen>
66
+
67
+ <GiftedChat
68
+
69
+ messages={this.props.messages}
70
+
71
+ onSend={this.onSend.bind(this)}
72
+
73
+ user={{
74
+
75
+ _id: currentUser.uid
76
+
77
+ }}
78
+
79
+ renderBubble={this.renderBubble}
80
+
81
+ renderSend={this.renderSend}
82
+
83
+ />
84
+
85
+ </Screen>
86
+
87
+ );
88
+
89
+ }
90
+
91
+ }
92
+
93
+
94
+
95
+ const mapStateToProps = (state) => {
96
+
97
+ const messages = _.map(state.messages, (val, uid) => {
98
+
99
+ return { ...val, uid };
100
+
101
+ });
102
+
103
+
104
+
105
+ return messages;
106
+
107
+ };
108
+
109
+
110
+
111
+ export default connect(mapStateToProps, {
112
+
113
+ messagesFetch
114
+
115
+ })(Message);
116
+
117
+ ```
118
+
119
+
120
+
27
- #### ソースコード(1)
121
+ #### fetchソースコード(1)
28
122
 
29
123
 
30
124
 
@@ -56,7 +150,7 @@
56
150
 
57
151
 
58
152
 
59
- #### ソースコード(2)
153
+ #### fetchソースコード(2)
60
154
 
61
155
 
62
156
 
@@ -94,7 +188,7 @@
94
188
 
95
189
 
96
190
 
97
- #### ソースコード(3)
191
+ #### fetchソースコード(3)
98
192
 
99
193
 
100
194