FirebaseでソートしてFetchしたい（redux）

Question

Firebaseから、指定したカラム（作成日）の昇順でFetchしたいと考えています。

こちら公式のドキュメントにあるように、orderByKey()や、orderByChild()を使ってみたのですが、思った通りに表示されずに困っています。

エラー＆ソースコード

(1) reduxでconsole.log()をしてみると、順番通りにsnapshotが取ってこれているのですが、

export const messagesFetch = (room) => {
  return (dispatch) => {
    firebase.database().ref(`/rooms/${room.roomId}/messages`)
    .orderByChild('createdAt')
    .on('value', snapshot => {
      console.log('順番（messageActions.js）', snapshot)
      dispatch({ type: 'messages_fetch_success', payload: snapshot.val() });
    })
  };
};

順番（messageActions.js） 

Snapshot {key: "messages", ref: Reference, _value: {…}, _priority: null, _childKeys: Array(5)}

key: "messages"

ref: Reference {_module: Database, path: "/rooms/XXXXXX/messages", _promise: null, _refListeners: {…}, _database: Database, …}

_childKeys:(5) ["-LAuoHzKSCT2hux0TC1O", "-LAuoLwIMD-523OpNrQi", "-LAuoOGawyAVT3ln5j6m", "-LAuoS2QjGhs6NtjAPv_", "-LAusvIn-gyO4ZYNAZ7Z"]

_value:
 - LAuoHzKSCT2hux0TC1O:
  - createdAt:"2018/04/24 20:20"
  - text:"1番初めのメッセージです"

 - LAuoLwIMD-523OpNrQi:
  - createdAt: "2018/04/24 20:20"
  - text: "2番目のメッセージです"

 - LAuoOGawyAVT3ln5j6m:
  - createdAt: "2018/04/24 20:21"
  - text: "3番目のメッセージです"

 -LAuoS2QjGhs6NtjAPv_:
  - createdAt: "2018/04/24 20:21"
  - text: "4番目のメッセージです"

 -LAusvIn-gyO4ZYNAZ7Z:
  - createdAt: "2018/04/24 20:40"
  - text:"5番目のメッセージです"

(2) MAessage.jsの方へfetchされた時に"どういうルールか分からない"順番でソートされます。最初_idかと思ったのですが、よく見ると違い、uidでもなさそうです。分かりません。

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
    };
  }

  componentWillMount() {
    const room = this.props.navigation.state.params.room;
    this.props.messagesFetch(room);
  }

  render() {
    const { currentUser } = firebase.auth();
    console.log('順番（Message.js）', this.props.messages);
    return (
      <Screen>
        <GiftedChat
          messages={this.props.messages}
          onSend={this.onSend.bind(this)}
          user={{
            _id: currentUser.uid
          }}
          renderBubble={this.renderBubble}
          renderSend={this.renderSend}
        />
      </Screen>
    );
  }
}

const mapStateToProps = (state) => {
  const messages = _.map(state.messages, (val, uid) => {
    return { ...val, uid };
  });

  return messages;
};

export default connect(mapStateToProps, {
  messagesFetch
})(Message);

順番（Message.js） 

(5) [{…}, {…}, {…}, {…}, {…}]
0: {user: {…}, createdAt: "2018/04/24 20:21", _id: 1524626462186, text: "3番目のメッセージです", uid: "-LAuoOGawyAVT3ln5j6m"}
1: {user: {…}, createdAt: "2018/04/24 20:21", _id: 1524626477639, text: "4番目のメッセージです", uid: "-LAuoS2QjGhs6NtjAPv_"}
2: {user: {…}, createdAt: "2018/04/24 20:40", _id: 1524627650612, text: "5番目のメッセージです", uid: "-LAusvIn-gyO4ZYNAZ7Z"}
3: {user: {…}, createdAt: "2018/04/24 20:20", _id: 1524626436230, text: "1番初めのメッセージです", uid: "-LAuoHzKSCT2hux0TC1O"}
4: {user: {…}, createdAt: "2018/04/24 20:20", _id: 1524626452866, text: "2番目のメッセージです", uid: "-LAuoLwIMD-523OpNrQi"}length: 5__proto__: Array(0)

Comments

[HayatoKamono]

情報が不十分だと思うので、第三者がデバッグしなくても現状が把握出来るように質問文を編集した方が良いかと思います。

[yamady]

コメントいただきまして、ありがとうございますmm　ご指摘いただきました通り、質問内容を追記させていただきました。

[HayatoKamono]

ランダムにメッセージが表示される、とありますが、そのランダムにメッセージが表示されたものって質問文に載ってなくないですか？クエリの画像がそれであるならば、何をもってそれがランダムに表示されてると言っているのかを説明する必要があると思います。また、逆にどういう結果が期待しているものなのかも載ってないと思うので、その辺りは最低限必要だと思います。

[HayatoKamono]

処理がどこまでは通っていて、どういった値がそれぞれの変数なり何なりに入ってるいるのが確認出来てるのかなども必要だと思います。

とりあえず、質問のヒントを何回か読んで、一度客観的に自分の質問が実行環境のない第三者に必要な情報、分かりやすい情報を十分に伝えられてるかを確認してみることをおすすめします。

https://teratail.com/help/question-tips

[yamady]

かしこまりました、ご指摘いただきましてありがとうございますmm いただいた内容とリンクを踏まえて、質問内容を再度作り直していきたいと思います。丁寧にご対応していただいて、感謝しかありません。ありがとうございます。

Answer 1

const mapStateToProps = (state) => {

  // state.messagesの中身をここで確認！！

  const messages = _.map(state.messages, (val, uid) => {
    return { ...val, uid };
  });

  return messages;
};

state.messagesの中身が上記コメント部分で期待通りの順序であるならば、順序がおかしくなっているのは、その次の_.map()部分と特定できると思います。

逆に、state.messagesの中身が上記コメント部分で期待通りの順序ではない場合は、対象となるreducerのコードをデバッグしてみて下さい。（必要であれば、その部分のコードとデバッグ結果を追記して下さい）

追記

(iteration order is not guaranteed)

との記載があるので列挙の順番の保証はないです。

https://lodash.com/docs#map

Comments

[yamady]

さっそくのご回答いただきまして、ありがとうございます。
ご指摘の通り、`state.messages`では、正常な値が渡されていたため、`_.map()`に問題があるということが分かりました。`_.map`を使わない方法で、表示する必要があるということですね。

[yamady]

コメントいただきましてありがとうございます。_.mapだと、順番持ってくるの厳しそうですね...。汗
まったく同じエラー見つけましたが、あまり参考になりませんでした。
https://github.com/FaridSafi/react-native-gifted-chat/issues/601

[HayatoKamono]

_.map()でどういう構造のデータをどのような構造のデータにしたいのかよくわかりませんが、_.map()使わずにやれば良いだけの話かと思います。もしくは、ほかのlodashのメソッドで目的に沿うものがあれば使うとか。

[yamady]

const messages = _.orderBy(state.messages, ['_id'], ['desc']);

これでいけました！！
ありがとうございます！
https://stackoverflow.com/questions/43371092/use-lodash-to-sort-array-of-object-by-value/43371146

[HayatoKamono]

素晴らしい！おめでとうございます！

[yamady]

ありがとうございます！
React Nativeの文献はまだ少なくて、それでいてすぐに更新されてしまうイメージがあります。
もっといろんな機能にも挑戦してみたいです！