Question

我在使用Reducer接收ActiveMessage对象的状态时遇到问题。当我单击消息列表上的一个对象时，我可以看到它通过正确的reducer流经动作，但是没有到达ActiveMessage的本地props。我不确定为什么它没有在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);

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);

动作/ index.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不是reducer，只是静态数据集。

Redux没有将状态传递给容器

1 个答案: