Question

我有一个Logout组件，它只是呈现一个按钮，该按钮应该将注销操作分配给reducer。如何在不使用redux connect（...）的情况下将调度方法绑定到该组件？或者是使用connect（）的最佳方式，即使它是像这样的哑组件吗？

我的组件看起来像这样，我通过导入商店使调度方法可用，但感觉不对：

import React from "react";
import { userActions } from '../_actions';
import { store } from '../_helpers/store.js';

const LogoutButton = ({ history }) => (
    <button
        type="button"
        className="logout"
        onClick={() => {
            store.dispatch(userActions.logout());
            history.push(`${process.env.PUBLIC_URL}/signin`);
        }
    }>
    Logout
    </button>
);

export default LogoutButton;

Answer 1

感觉不对。您最好使用connect的便捷方式。请记住，依靠模块系统从商店提供dispatch或数据可能会使您的测试变得困难。如果您使用connect，那些内容将来自React的上下文，您可以轻松地模拟它们。

Answer 2

一个哑组件应该由道具驱动，所以你只需要在你的LoginButton组件中将一个函数作为道具传递给你的容器组件。

示例：

父：

<LoginButton onPress={store.dispatch(userActions.logout())}/>

子：

const LogoutButton = ({ history, onPress }) => (
 <button
    type="button"
    className="logout"
    onClick={() => {
        onPress();
        history.push(`${process.env.PUBLIC_URL}/signin`);
    }
 }>
 Logout
 </button>
);

Answer 3

connect应该是它的功能组件还是传统的React组件。您通过连接获得的另一个好处是它是PureComponent，因此负责更新

const LogoutButton = ({ history }) => (
    <button
        type="button"
        className="logout"
        onClick={() => {
            userActions.logout();
            history.push(`${process.env.PUBLIC_URL}/signin`);
        }
    }>
    Logout
    </button>
);

export default connect(null, userActions)(LogoutButton);

如何将redux dispatch方法绑定到“哑”组件

3 个答案: