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

Question

我正在尝试学习 react-redux 架构，但我在最基本的东西上失败了。

我创建了 HomePage 类并使用 react-redux connect() 将其连接到 store 的 state 和 dispatch。

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，这是通过connect 将道具传递给HomePage 的容器。

所以替换这个

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

Answer 2

你有这个：

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

export default HomePage;

要创建连接组件的实例，您需要这样做：

export default connect()(HomePage);

注意我没有写两次export default，不好的做法，每个组件你只写一次export default，所以connect()进入同一行代码，调用或第二组括号你包裹你的组件正在工作。

这个connect() 函数实际上是一个 React 组件，您将向它传递一些配置，您开始这样做的方式是调用 mapStateToProps，如下所示：

const mapStateToProps = () => {

};

export default connect()(HomePage);

你也可以这样做：

function mapStateToProps() {

}

如果您阅读它，这是有道理的，这意味着我们将映射我们的状态对象，redux 存储中的所有数据并运行一些计算，这将导致该数据显示为我们组件中的道具，这就是mapStateToProps的含义。

从技术上讲，我们可以随意调用它，它不必一定是 mapStateToProps，但按照惯例，我们通常称它为 mapStateToProps，它会在 redux 存储中的所有状态被调用。

const mapStateToProps = (state) => {

};

export default connect()(HomePage);

状态对象包含您尝试从 redux 存储中访问的任何数据。您可以通过函数内的控制台记录状态来验证这一点，如下所示：

const mapStateToProps = (state) => {
  console.log(state);

   return state;
};

export default connect()(HomePage);

我返回状态只是为了确保一切正常。

定义该函数后，您将其作为第一个参数传递给connect() 组件，如下所示：

const mapStateToProps = (state) => {
  console.log(state);

   return state;
};

export default connect(mapStateToProps)(HomePage);

这就是我们配置连接组件的方式。我们通过传递一个函数来配置它。运行它，看看会发生什么。