Question

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

假设我们有一些带有回调Foo的React组件onClick，它像往常一样传入props。我们希望使用操作创建者作为回调，因此我们使用相应的mapDispatchToProps调用connect并导出结果：

// 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提供任何参数，所以我想我现在需要在使用connect组件之前调用Foo。所以这是我目前的解决方案：

// 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

这是我自己发明的轮子:)我相信这是一个常见的问题，并且想知道它是否有更好的解决方案。

Answer 1

我不确定为什么在这种情况下你需要导出connect ed组件。您只能导出Foo.jsx并将其连接到第1页＆amp; 2例如

Foo.jsx

const Foo = ({ callback }) => (<div onClick={callback}>Hello</div>)
export default Foo;

Page 1

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

Page 2

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

希望它有意义。

在不同的网页

1 个答案: