React Native with Reduxで接続コンポーネントの小道具が更新されない

Question

React Native + Reduxを使用してRealtime Chat Appを作成しています。 websocketから新しいメッセージを受け取ると、内部的にはreduxストアの配列としてメッセージのリストが更新されます。これは、次のようになります。

簡単に理解できるCHAT_INITとCHAT_RECVの2つのアクションがあります。

ソケットから新しいメッセージを受信すると、アプリケーションは 'CHAT_RECV'アクションでstore.dispatchを呼び出します。新しいメッセージが到着したので、ときに私はChatReducer.chatListでChatListコンポーネントを接続

class ChatList extends Component { 
    static propTypes = { 
     chatList: React.PropTypes.array 
    } 
    static defaultProps = { 
     chatList: [] 
    } 
    componentWillMount() { 
     store.dispatch({ 
      type: ChatActions.CHAT_INIT, 
      data: '' 
     }); 
    } 
    componentWillReceiveProps(nextProps) { 
     console.log('will receive props'); // 1 
    } 
    render() { 
     console.log('<ChatList />::chatList', this.props.chatList); // 2 

     return (
      <View style={styles.chatList}> 
       <Text>ChatList</Text> 
      </View> 
     ); 
    } 
} 

export default connect(state => { 
    let chatList = state.ChatReducer.chatList; 
    console.log('Got:', chatList); // 3 

    return { 
     chatList: state.ChatReducer.chatList 
    }; 
})(ChatList); 

、ChatListコンポーネントの小道具が更新されます：これは、メッセージのリストのコンポーネントのコードです。

チャットリストコンポーネントの小道具はまったく更新されません！ご覧のとおり、問題がどこにあるかを追跡するためにconsole.logをたくさん配置しました。簡単な説明のために、console.logの次の番号が追加されました。

私は接続されたコンポーネントChatListのchatListの小道具を更新しようとしていて、新しい小道具（新しいメッセージを意味する）を受け取ったときに再レンダリングする必要があることが分かります。

console.logの[3]は「Got：[...、...]」も表示しますが、[1]と[2]は何も印刷されません！ ChatListコンポーネントが次の小道具を適切に受け取らなかったことを意味します。

コードをダブルチェックしてこれを修正しようとしましたが、あまり効果がありませんでした。 ReduxまたはReact-Reduxモジュールのこの問題はありますか？以前はElectron ChatAppのために両方のモジュールを使用していましたが、問題なく動作しました。

私は逃したものがありますか？私は本当に何が問題なのか分からない。誰もがこの問題について知っています。手を挙げてください。とても感謝しています。

P.S.これらは他のコンポーネントコードです。私はそれが重要ではないと思うが、私はちょうどそれを知りたい人のためにそれを貼り付ける。

優れたコンポーネント：App.js

export default class App extends Component { 
    componentDidMount() { 
     init();  // this invokes CHAT_INIT action. 
    } 
    render() { 
     return (
      <Provider store={store}> 
       <ChatApp /> 
      </Provider> 
     ); 
    } 
} 

ChatApp.js実際ChatListコンポーネントレンダリング：あなたがここにあなたの状態を変異している

class ChatApp extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <NavBar username={this.props.username} connected={this.props.connected} /> 
       <ChatList connected={this.props.connected} /> 
       <ChatForm connected={this.props.connected} /> 
      </View> 
     ); 
    } 
} 

export default connect(state => { 
    return { 
     username: state.UserReducer.username, 
     connected: state.NetworkReducer.connected 
    }; 
})(ChatApp); 

Answer 1

：代わりに

case CHAT_RECV: 
     let chatList = state.chatList; 
     chatList.push(action.data); 
     return Object.assign({}, { 
      chatList: chatList 
     }); 

を、 do：

case CHAT_RECV: 
     let chatList = state.chatList.concat(action.data); 
     return Object.assign({}, { 
      chatList: chatList 
     });