Question

这种不好的做法吗？

SendInfoButton.js

import React from 'react';
import { sendInfo } from '../actions/index';

export const SendInfoButton = ({currentUser}) => (
    <div>
        <button onClick={() => sendInfo(currentUser)} />
    </div>
)

actions / index.js

import { store } from '../reducers/index';
import { SEND_INFO } from '../constants/index;

export const sendInfo = (currentUser) => store.dispatch({type: SEND_INFO, payload: currentUser})

与使用mapDispatchToProps并将动作传递给不使用它们的组件相比，以这种方式将动作直接导入组件似乎更为有效。我也更倾向于导入这样的动作，因为我已经拥有带有大量道具的组件，并且宁愿不添加它。

Answer 1

导入动作创建者（例如import { sendInfo } from '../actions/index';）很好-这就是您应该这样做的方式。

但是，您应该然后使用connect来“绑定”动作创建者，以便他们在运行时访问正确的商店实例并自动分派动作。可以使用“对象简写”语法将其缩短—只需将充满动作创建者的对象作为第二个参数传递给connect，例如：

export default connect(null, {sendInfo})(SendInfoButton);

类似地，您shouldn't import the store directly。正如@estes所说，这始终将您的代码锁定在同一个“生产”存储实例中，从而使测试或重用代码变得更加困难。

直接将动作导入组件是不好的做法吗？

1 个答案: