React-redux connect()无法传递道具

Question

我正在尝试学习react-redux架构,但我最基本的东西都失败了.

我创建了类HomePage并使用react-redux connect()将它连接到存储的状态和调度.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {HomeButtonClickAction} from "./HomeActionReducer";
import {connect} from "react-redux";

class HomePage extends Component {

    constructor(props) {
        super(props);

        console.log('HomePage props');
        console.log(this.props);

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

    buttonClicked() {
        console.log('button cliked');
        this.props.buttonClick();
    }

    render() {
        console.log('Re-rendering...');

        let toggleState = this.props.toggle ? 'ON' : 'OFF';
        return (
            <div>
                <button onClick={this.buttonClicked}>{ toggleState }</button>
            </div>
        )
    }
}

HomePage.propTypes = {
    toggle: PropTypes.bool.isRequired,
    onClick: PropTypes.func.isRequired
};

const mapStateToProps = (state, ownProps) => {
    return {
        toggle: state.toggle
    }
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        buttonClick: () => {
            dispatch(HomeButtonClickAction());
        }
    }
};

const HomeContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(HomePage);

export default HomePage;

但这对我不起作用.HomeContainer不会将道具传递给HomePage组件.我在devtools中收到了这些警告.

我的index.js看起来像这样.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import AppReducer from "./reducers/AppReducer";
import { createStore } from "redux";
import { Provider } from 'react-redux';

const store = createStore(AppReducer);

ReactDOM.render(
    <Provider store={ store }>
        <App/>
    </Provider>,
    document.getElementById('root')
);

registerServiceWorker();

和AppReducer.js

import { combineReducers } from 'redux';
import { toggle } from '../home/HomeActionReducer';

const AppReducer = combineReducers({
    toggle
});

export default AppReducer;

和HomeActionReducer.js

const HOME_BUTTON_CLICK = 'HOME_BUTTON_CLICK';

export function toggle (state = true, action) {
    console.log('toggle launched');

    switch (action.type) {
        case HOME_BUTTON_CLICK :
            return !state;

        default:
            console.log('Toggle reducer default action');
            return state;
    }
}

export function HomeButtonClickAction() {
    console.log('action emitted');

    return {
        type: HOME_BUTTON_CLICK
    };
}

作为一个新手,我真的很感谢你的帮助:)

Answer 1

您正在导出HomePage,这是表示组件.要导出HomeContainer,这是通过道具的集装箱HomePage通过connect.

所以取而代之

export default HomePage;

有了这个

export default HomeContainer;

你也可以直接写

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

请注意,由于它是default导出,您可以根据需要命名导入,例如:

import HomePage from './HomePage' // even if it's HomeContainer that is exported