如何将 redux 调度方法绑定到 "dumb" 组件

Question

我有一个注销组件，它只呈现一个按钮，该按钮应将注销操作分派给减速器。如何在不使用 redux connect(...) 的情况下将 dispatch 方法绑定到该组件？或者是使用 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

哑组件应该由 props 驱动，因此您可以在容器组件的 LoginButton 组件中将函数作为 prop 传递。

示例：

Parent:

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

Child:

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

Answer 3

connect 应该是要走的路，无论是功能组件还是传统的 React 组件。使用 connect 获得的另一个优势是它是一个 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 调度方法绑定到 "dumb" 组件

How to bind redux dispatch method to a "dumb" component

dispatch

reactjs

redux