javascript - 从 Redux 中导出值(value)，使其全局化

Question

我正在使用 redux-responsive作为创建响应式设计的帮助工具。

无论设备是否具有桌面宽度，我都会像这样从 Redux 传递一个 bool 值属性:

const mapStateToProps = (state) => ({
  desktop: state.browser.greaterThan.small,
})

这在整个应用程序的很多地方都有定义，我想跳过 mapStateToProps 并导出它一次，然后像这样导入它:

import { desktop } from './someWhereInStore.js';

我想知道如何以及在何处导出 Redux 中的 desktop 值？

Answer 1

您必须以某种方式将您的组件连接到商店。您可以实现一个包装器来分解您的映射:

export function wrapper(WrappedComponent) {

    class WrapperComponent extends Component {

        render() {
            return <WrappedComponent
                {...this.props}
                desktop={this.props.desktop}
            />
        }
    }

    const mapStateToProps = (state) => ({
        desktop: state.browser.greaterThan.small,
    })

    return connect(mapStateToProps)(WrapperComponent);
}

并替换

const mapStateToProps = (state) => ({
  desktop: state.browser.greaterThan.small,
});    

connect(mapStateToProps)(...);

通过

wrapper(...);