Reduxが状態をコンテナに渡さない

Question

私のレデューサーからActiveMessageオブジェクトの状態を受け取る際に問題が発生しました。メッセージリストのオブジェクトをクリックすると、そのアクションが正しいリデューサを通って流れているのがわかりますが、ActiveMessageのローカルプロップには届きません。なぜ私はactive_message propで状態を受け取っていないのか分かりません。誰も私は正しい方向に私はなぜこれは動作しないとして私を指摘することはできますか？

message_list.js

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import MessageStub from "./message_stub"; 
import {activateMessage} from "../../actions/index"; 
import {bindActionCreators} from 'redux'; 

class MessageList extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      selected_message: null 
     }; 

     this.selectMessage = this.selectMessage.bind(this); 
    } 

    selectMessage(event, index, message){ 
     this.setState({selected_message: index}); 
     this.props.activateMessage(message); 

    } 

    renderMessageList() { 
     return this.props.message_list.map((message, index) => 
      <tr key={index}> 
       <td className={index === this.state.selected_message ? "message-stub-body active-message-stub" : "message-stub-body"} 
        onClick={(e) => this.selectMessage(e, index, message)}> 
        <MessageStub /> 
       </td> 
       <td> 
        {index === this.state.selected_message && <div className="message-stub-arrow"/>} 
       </td> 
      </tr> 
     ); 
    } 

    render() { 
     return (
      <div className="message-list"> 
       <table className="message-list-table"> 
        <tbody> 
        {this.renderMessageList()} 
        </tbody> 
       </table> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    return { 
     message_list: state.message_list, 
    }; 
} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators({activateMessage: activateMessage}, dispatch) 
} 
export default connect(mapStateToProps, mapDispatchToProps)(MessageList); 

は

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 

import MessageOut from "./message_out"; 
import MessageIn from "./message_in"; 

class ActiveMessage extends Component { 
    constructor(props) { 
     super(props); 
     this.scrollToBottom = this.scrollToBottom.bind(this); 

    } 

    componentDidMount() { 
     this.scrollToBottom(); 
    } 

    componentDidUpdate() { 
     this.scrollToBottom(); 
    } 

    scrollToBottom() { 
     this.el.scrollTop = this.el.scrollHeight; 
    } 

    renderMessages(){ 
     return this.props.active_message.messages.map((message, i) => 
      <MessageOut key={i} onClick={() => { 
       this.scrollToBottom 
      }}/> 
     ); 

    } 
    render() { 
     console.log("rendering"); 
     console.log(this.props.active_message); 
     if(!this.props.active_message){ 
      return <div>loading...</div> 
     } 
     return (
      <div className="active-message-div"> 
       <div className="active-message" 
        ref={el => { 
         this.el = el; 
        }}> 
        {this.renderMessages()} 
       </div> 
       <div className="message-reply-div"> 
        <textarea className="message-reply-input" placeholder="Type a message..."/> 
       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    console.log("mapping"); 
    return{ 
     active_message: state.active_message 
    } 
} 

export default connect(mapStateToProps)(ActiveMessage); 

アクション/ index.jsをactive_message.js

export const ACTIVATE_MESSAGE = 'activate_message'; 

export function activateMessage(message){ 
    console.log("calling action " + message) 
    return{ 
     type: ACTIVATE_MESSAGE, 
     payload: message 
    }; 
} 

リデューサー/ index.js

import { combineReducers } from 'redux'; 
import MessageListReducer from './reducer_message_list'; 
import ActiveMessageReducer from './reducer_active_message'; 

const rootReducer = combineReducers({ 
    message_list: MessageListReducer, 
    active_message: ActiveMessageReducer, 
}); 

export default rootReducer; 

reducer_active_message.js

import {ACTIVATE_MESSAGE} from "../actions/index"; 

export default function(state = null, action){ 
    switch(action.type){ 
     case ACTIVATE_MESSAGE: 
      console.log("reducing through ACTIVE_MESSAGE"); 
      return action.payload; 
    } 
    return state; 
} 

reducer_message_list.js

export default function(){ 
    return[ 
     { 
      user: { 
       first_name: "First", 
       last_name: "Last", 
       type: "P" 
      }, 
      messages: [ 
       { 
        message: "hi", 
        inbound: true 
       }, 
       { 
        message: "bye", 
        inbound: false 
       } 
      ] 


     }, 
     { 
      user: { 
       first_name: "First2", 
       last_name: "Last2", 
       type: "O" 
      }, 
      messages: [ 
       { 
        message: "hi", 
        inbound: true 
       }, 
       { 
        message: "bye", 
        inbound: false 
       } 
      ] 


     } 
    ]; 
} 

Answer 1

私はCodeSandboxにこれをロードしています。私はこれを働かせることができます。

https://codesandbox.io/s/7y9nlvvprq

注：お使いのreducer_message_listは減速、単なる静的なデータセットではありません。