質問編集履歴

ソースコードを追記して、指摘箇所を訂正しました。

2018/04/20 07:57

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,6 +16,20 @@
 #### 実現したいこと＆困っていること
+```
+ReferenceError: message is not defined
+```
+Message.jsの`messages: GiftedChat.append(previousState.messages, message),`でつっかえています。ここには、既にFirebaseに保存されているデータベースが取ってこれるはずなのですが、このmessageを取ってくることができなくて困っています。
 [こちらのソースコード](https://github.com/FaridSafi/ChatApp)をRedux仕様にして、チャット機能を実装したいのですが、保存は成功しているのですが
@@ -24,11 +38,15 @@
-Fetchがうまくいきません。
-参考コードに忠実にしたがっているのですが、やはりmessageをfetchできません。
-ComoponentDidMountが効いていないように思います。。
+message2は下記のコンソール情報が取ってこれています。
+![イメージ説明](de07bfea46f399ec4ad8cc9e5e057c73.png)
+ここのvalueを一つずつmessageの中にsetStateしてあげたいのですが＞＜
@@ -60,6 +78,8 @@
+    console.log('message3, message);
     this.setState((previousState) => {
       return {
@@ -272,22 +292,136 @@
-meesage1, message2は取れて来ていますが、message3はエラーすら出ません（無視されている？）
-#### 追記
-componentDidMountを排除し、componentWillMountを使うことにしました。
-message2は下記のコンソール情報が取ってこれています。
-![イメージ説明](de07bfea46f399ec4ad8cc9e5e057c73.png)
-ここのvalueを一つずつmessageの中にsetStateしてあげたいのですが＞＜
+> messageReducer.js
+```JavaScript
+ type uiActions = {
+   type: 'messages_fetch_success',
+ }
+ const initialState = {};
+ export default (state = initialState, action) => {
+   switch (action.type) {
+     case 'messages_fetch_success':
+       return action.payload;
+     default:
+       return state;
+   }
+ };
+```
+> messageFormReducer.js
+```
+/**
+ * @flow
+ *
+ * Manages the state of all Message Form components which rely on Redux
+ */
+ type uiActions = {
+   type: 'message_update',
+   type: 'message_create,'
+ }
+ const initialState = {
+   text: '',
+   user: '',
+   createdAt: '',
+   _id: '',
+   roomId: ''
+ };
+ export default (state = initialState, action) => {
+   switch(action.type) {
+     case 'message_update':
+       return { ...state, [action.payload.prop]: action.payload.value };
+     case 'message_create':
+       return initialState;
+     default:
+       return state;
+   }
+ };
+```
+> store.js
+```
+const rootReducer = combineReducers({
+  messages: messageReducer,
+  messageForm: messageFormReducer
+});
+const store = createStore(
+  rootReducer,
+  applyMiddleware(reduxThunk)
+);
+export default store;
+```

ソースコードの修正、エラーの詳細を追記しました

2018/04/20 07:57

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,9 +8,7 @@
-[Firebaseでチャット機能を実現したい（react native）](https://teratail.com/questions/122414
+[Firebaseでチャット機能を実現したい（react native）](https://teratail.com/questions/121827)
-)
 [gifted chatでmessageをDBからFetchしたい（react native）](https://teratail.com/questions/122414)
@@ -54,226 +52,242 @@
-  componentDidMount() {
-    this.props.messagesFetch((message) => {
-      console.log('message3', message);
-      this.setState((previousState) => {
-        return {
-          messages: GiftedChat.append(previousState.messages, message),
-        };
-      });
+  componentWillMount() {
+    const room = this.props.navigation.state.params.room;
+    this.props.messagesFetch(room);
+    this.setState((previousState) => {
+      return {
+        messages: GiftedChat.append(previousState.messages, message),
+      };
+    });
+  }
+  onSend = (message) => {
+    const room = this.props.navigation.state.params.room;
+    this.props.sendMessage({
+      message,
+      room
+    });
+  }
+  renderBubble(props) {
+    return (
+      <Bubble
+        {...props}
+        wrapperStyle={{
+          right: {
+            backgroundColor: Theme.SECONDARY
+          }
+        }}
+      />
+    )
+  }
+  renderSend(props) {
+    return (
+      <Send
+      {...props}
+      textStyle={{
+        color: Theme.SECONDARY
+      }}
+      />
+    );
+  }
+  render() {
+    const { currentUser } = firebase.auth();
+    return (
+      <Screen>
+        <GiftedChat
+          messages={this.state.messages}
+          onSend={this.onSend.bind(this)}
+          user={{
+            _id: currentUser.uid
+          }}
+          renderBubble={this.renderBubble}
+          renderSend={this.renderSend}
+        />
+      </Screen>
+    );
+  }
+}
+const mapStateToProps = (state) => {
+  const { text, user, createdAt, _id } = state.messageForm;
+  return { text, user, createdAt, _id };
+};
+export default connect(mapStateToProps, {
+  sendMessage,
+  messagesFetch
+})(Message);
+```
+> redux/messageActions.js
+```JavaScript
+/**
+* Builds an action to request
+*/
+export const sendMessage = ({ message, room }) => {
+  const { currentUser } = firebase.auth();
+  return (dispatch) => {
+    firebase.database().ref(`/rooms/${room.roomId}/messages/`)
+    .push({
+      text: message[0].text,
+      user: message[0].user,
+      createdAt: firebase.database.ServerValue.TIMESTAMP,
+    })
+    .then(() => {
+      dispatch({ type: 'message_create' });
+    });
+  }
+}
+/**
+* Builds an action to notification fetch action
+*/
+export const messagesFetch = (room) => {
+  return (dispatch) => {
+    firebase.database().ref(`/rooms/${room.roomId}/messages/`)
+    .once('value', snapshot => {
+      const message = snapshot.val();
+      return message;
+    })
+    .then(message => {
+      dispatch({ type: 'messages_fetch_success', payload: message });
+      console.log('message2', message);
     });
   };
-  onSend = (message) => {
-    const room = this.props.navigation.state.params.room;
-    this.props.sendMessage({
-      message,
-      room
-    });
-  }
-  renderBubble(props) {
-    return (
-      <Bubble
-        {...props}
-        wrapperStyle={{
-          right: {
-            backgroundColor: Theme.SECONDARY
-          }
-        }}
-      />
-    )
-  }
-  renderSend(props) {
-    return (
-      <Send
-      {...props}
-      textStyle={{
-        color: Theme.SECONDARY
-      }}
-      />
-    );
-  }
-  render() {
-    const { currentUser } = firebase.auth();
-    return (
-      <Screen>
-        <GiftedChat
-          messages={this.state.messages}
-          onSend={this.onSend.bind(this)}
-          user={{
-            _id: currentUser.uid
-          }}
-          renderBubble={this.renderBubble}
-          renderSend={this.renderSend}
-        />
-      </Screen>
-    );
-  }
-}
-const mapStateToProps = (state) => {
-  const { text, user, createdAt, _id } = state.messageForm;
-  return { text, user, createdAt, _id };
 };
-export default connect(mapStateToProps, {
-  sendMessage,
-  messagesFetch
-})(Message);
 ```
-> redux/messageActions.js
-```JavaScript
-/**
-* Builds an action to request
-*/
-export const sendMessage = ({ message, room }) => {
-  const { currentUser } = firebase.auth();
-  return (dispatch) => {
-    firebase.database().ref(`/rooms/${room.roomId}/messages/`)
-    .push({
-      text: message[0].text,
-      user: message[0].user,
-      createdAt: firebase.database.ServerValue.TIMESTAMP,
-    })
-    .then(() => {
-      dispatch({ type: 'message_create' });
-    });
-  }
-}
-/**
-* Builds an action to notification fetch action
-*/
-export const messagesFetch = (room) => {
-  return (dispatch) => {
-    firebase.database().ref(`/rooms/${room.roomId}/messages/`)
-    .once('value', snapshot => {
-      const message = snapshot.val();
-      return message;
-      console.log('message1', message);
-    })
-    .then(message => {
-      dispatch({ type: 'messages_fetch_success', payload: message });
-      console.log('message2', message);
-    });
-  };
-};
-```
 meesage1, message2は取れて来ていますが、message3はエラーすら出ません（無視されている？）
+#### 追記
+componentDidMountを排除し、componentWillMountを使うことにしました。
+message2は下記のコンソール情報が取ってこれています。
+![イメージ説明](de07bfea46f399ec4ad8cc9e5e057c73.png)
+ここのvalueを一つずつmessageの中にsetStateしてあげたいのですが＞＜

プライベートな情報を排除しました！

2018/04/19 21:10

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,7 +4,7 @@
 react nativeでチャット投稿を実現したいと思っています。
-（これで3回目の質問になります。Hayatoさんいつもありがとうございます！泣）
+（これで3回目の質問になります。）