javascript - 如何使用 Redux 和 React 实现自己的“连接”功能

Question

我正在尝试实现我自己的自定义方式将道具传递给组件。

我想要实现的是类似于connect()(Component)方法的东西，但有我自己的一点点扭曲。

假设我有一个自定义组件，例如，

// presentationalComponent.js
const PresentationalComponent = ({
    name,
    loading,
}) => {
    return (
        <div>
            This component is: {name}. The current state is: {loading}
        </div>
    )
}

和一个错误组件，例如，

// error.js
const Error = ({errors}) => {
    return (
        errors.forEach(error => {
            <div>{error}</div>
        })
    )
}

我想用一个morph方法包装每个组件，该方法将获取请求的状态并返回一个父组件。

所以如果我要这样做，

const PresentationalComponent = ({ . . .
. . .
}

export default morph('layout', ['loading'])(PresentationalComponent)

我希望该morph方法返回类似的东西，

const getState = (reducer, values) =>
    // lodash
    _.pick(
        useSelector((state) => state[reducer]),
        values,
    )

const ParentContainer = ({Component, requestedState: {reducer, fields}}) => {
    const errors = useSelector(({ errors }) => errors)
    const state = getState(reducer, fields)
    if (errors.length) return <Error errors={errors} />

    return <Component state={state} />
}

但是我不知道该怎么做，因为钩子之类useSelector的只能用在功能组件中。我不确定connectRedux 是如何使它工作的。

理想情况下，如果我要这样做，

const Home = ({ state }) => {
    <PresentationalComponent name='My presentational component!' />;
};

我想看看This component is: My presentational component!. The current state is: false。

如何通过导出我的组件来实现这一点，例如morph('reducer', ['state'])(Component)？

我试过类似的东西，

const morph = (reducer, state) => (Component) => {
    console.log('reducer', reducer);
    console.log('state', state);
    return Component;
};

export default morph;

但这没有用。

标签： javascriptreactjs