Redux not passing state to container - reactjs

Question

I'm having a problem receiving the state on my ActiveMessage object from my reducers. When I click an object on the message list, I can see that it flows through the action, through the correct reducer, but doesn't arrive on the local props for ActiveMessage. I'm not sure why it's not receiving the state on active_message prop. Can anyone point me in the right direction as to why this isnt working?
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);
active_message.js
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);
actions/index.js
export const ACTIVATE_MESSAGE = 'activate_message';
export function activateMessage(message){
console.log("calling action " + message)
return{
type: ACTIVATE_MESSAGE,
payload: message
};
}
reducers/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

I have loaded this into CodeSandbox. I'm able to get this to work.
https://codesandbox.io/s/7y9nlvvprq
NOTE: Your reducer_message_list is not a reducer, just a static data set.