Reactjs 在不同页面上绑定不同的操作创建者

我遇到了一个与动作创作者有关的问题，我认为他们有一个众所周知的解决方案

假设我们有一个React组件

Foo

，带有一个回调

onClick

，它像往常一样传入props。我们希望使用action creator作为回调，因此我们使用相应的

mapDispatchToProps

调用并导出结果：

// Foo.jsx
import someActionCreator from 'actions';

const Foo = props => {...} // Presentational React component

const mapStateToProps = state => ...;
const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            onClick: someActionCreator
        },
        dispatch
    );
export default connect(mapStateToProps, mapDispatchToProps)(Foo)

现在我想在另一个页面上使用组件

Foo

，并将不同的操作创建者作为回调传递。当然，在导入时，我无法向模块

Foo.jsx

提供任何参数，因此我想我现在需要在使用

Foo

组件之前调用

connect

。这就是我目前的解决方案：

// Foo.jsx

const Foo = props => {...} // Presentational React component

const mapStateToProps = state => ...;

const fooFabric = actionCreator => {
    const mapDispatchToProps = dispatch =>
        bindActionCreators(
            {
                onClick: actionCreator
            },
            dispatch
        );

    return connect(mapStateToProps , mapDispatchToProps)(Foo);
}

export default fooFabric;


// Page #1
import fooFabric from 'Foo';
import someActionCreator from 'actions';

const Foo = fooFabric(someActionCreator);
// render Foo


// Page #2
import fooFabric from 'Foo';
import someOtherActionCreator from 'actions';

const Foo = fooFabric(someOtherActionCreator);
// render Foo

---

这是我自己发明的轮子：）我相信这是一个常见问题，不知道它是否有更好的解决方案。

我不确定在这种情况下为什么需要导出

连接
ed组件。您只能导出
Foo.jsx
，并将其连接到第1页和第2页，例如

Foo.jsx

第2页

希望有意义。
谢谢。这看起来像我当前的解决方案。不同之处在于我将
MapStateTops
隐藏在
fooFabric
内部。
const Foo = ({ callback }) => (<div onClick={callback}>Hello</div>)
export default Foo;

import Foo from 'Foo.jsx'
import { connect } from 'react-redux'
import { myPageAction1 } from './actions'
...
const Page1ConnectedFoo = connect(mapStateToProps, { myPageAction1 })(Foo)
... 

import Foo from 'Foo.jsx'
import { connect } from 'react-redux'
import { myPageAction2 } from './actions'
...
const Page2ConnectedFoo = connect(mapStateToProps, { myPageAction2 })(Foo)