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

Answer 2

你有这个：

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

export default HomePage;

要创建connect组件的实例，您需要执行以下操作：

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

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

React-redux connect（）无法传递道具

2 个答案: