将函数从 mapDispatchToProps 传递到 react/redux 应用程序中的 Container 组件答案

【问题标题】：Passing function from mapDispatchToProps to Container component in react/redux app将函数从 mapDispatchToProps 传递到 react/redux 应用程序中的 Container 组件
【发布时间】：2018-01-25 18:30:13
【问题描述】：

我正在渲染 RootComponent：

//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------
ReactDOM.render(

    <Provider store={store}>
        <RootComponent />
    </Provider>, 

    document.getElementById('app'));
//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------

RootComponent只有一个容器：

//ROOT COMPONENT----------------------------------------------------------------------------------------------------
const RootComponent = () => (

    <div>
        <BookListContainer />           
    </div>

);
//ROOT COMPONENT----------------------------------------------------------------------------------------------------

BooklistContainer：

//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------
class BookListContainer extends Component{

    componentWillMount(){
        console.log('componentWillMount executing...');
        () => this.props.ajaxRequestTriggeredMethod();
    }

    render() {
        return (
            <div>
                <BooksList DataInputParam={this.props.books} BtnClickHandler={this.props.buttonClickedMethod} />            
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    return{
        books: state.BooksReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        buttonClickedMethod: () => dispatch({type: 'BUTTON_CLICKED'}),
        ajaxRequestTriggeredMethod: () => console.log('ajaxRequestTriggeredMethod is consoled...')
    };
};

connect(mapStateToProps, mapDispatchToProps)(BookListContainer);
//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------

目前所有组件都在一个 js 文件中，所以我不会导出/导入除标准库之外的任何内容...

结果：我在控制台中收到 'componentWillMount execution...' 消息，但不是得到 'ajaxRequestTriggeredMethod is concond...' 消息。此外，控制台中不会显示任何错误。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

因为你没有执行箭头函数。您可以直接调用此方法。

componentWillMount(){
    console.log('componentWillMount executing...');
    this.props.ajaxRequestTriggeredMethod(); //Invoke directly
}

【讨论】：

感谢您的回答，但似乎我在这里遗漏了一些重要的东西：如果我这样做 this.props.ajaxRequestTriggeredMethod(); 我收到一个错误：未捕获的类型错误：this.props.ajaxRequestTriggeredMethod 不是函数
@vshnukrshna 抱歉，我离开了一段时间。但正如 Gaetan 所建议的，您应该拥有一个容器组件来处理连接和道具，并将道具传递给展示组件。不过，在您的情况下，我认为您应该导出连接的组件， export default connect(mapStateToProps, mapDispatchToProps)(BookListContainer);
感谢您的帮助，@Dev！

【解决方案2】：

不是专家，但connect()函数返回

一个高阶 React 组件类，它将状态和动作创建者传递到从提供的参数派生的组件中

所以我的猜测是做这样的事情：

const randomNameForComponent = connect(mapStatetoProps, mapDispatchToProps)(BookListContainer);
export default randomNameForComponent;

在您的RootComponent 中，渲染randomNameForComponent 而不是BookListComponent。

它应该做到这一点。

【讨论】：

谢谢，@GaetanBoyals，它有效！但现在我只想指定一个方面：据我了解，每个 container 组件 又名 smart 组件 将其子组件“连接”到商店。现在，在这种特殊情况下，应该将什么视为容器组件：BookListContainer 或 randomNameForComponent 或两者兼而有之？
没问题，我也为连接而苦苦挣扎了很长时间；）至于你的问题，它会是 randomNameForComponent，因为正如this link 中所说的那样，作为公认的答案, “容器组件是与 Redux 管理的状态直接连接的反应组件，也称为‘智能组件’”。另外，如果我的回答解决了问题，您能否将其标记为正确？谢谢你:)
我很高兴，很高兴我能提供帮助，因为我通常是提问的人^^