Question

我正在创建一个使用Redux进行状态管理的npm模块。我的模块将是一个库，可以在属于不同客户的几个应用程序中重复使用。我希望客户端应用程序将维护我的库也将使用的单个商店。

问题在于我需要将mapStateToProps函数传递给我的库中的connect()。我不知道我的库的用户放置了我的reducer和state树的哪个键。

我可以做出明智的猜测，例如我的图书馆的camelCase名称。然而，这似乎不是一个强有力的方法，因为1 /用户可能正在使用我的密钥用于其他东西2 /在状态树中只能有我的库的一个实例（我可以想到一些情况，我会想要超过1个实例）。

这是一个简单的问题示例。我可以创建一个Logon npm模块，我想挂钩到我的商店并查看层次结构。我不知道应用程序商店中的路径，因此????在mapStateToProps中。有没有一种很好的方法来处理这种情况？

// node_modules/my-company-logon/

const LoginScreen = ({ username, failureReason }) => (
    // my presentation logic
);

export default connect(
  username: state.????.lastSessionUsername,
  failureReason: state.????.failureReason
)(LoginScreen); 

export const logonReducer(state, action) => { /* reducer logic */  }




// my-customer/app.js

import LogonScreen, { logonReducer } from 'my-company-logon';

let store = createStore(combineReducers({
    someUnexpectedPath: logonReducer
}))

编辑：

我通过包装react-redux的连接功能解决了这个问题。模块的Root组件具有选择器的上下文，可以从安装lib的位置读取数据。

export default connect(
    (state, selectors, actionCreators) => ({
        username: selectors.getUsername(state),
        loginFailureReason: selectors.getLogonFailureReason(state)
    })
)(LoginScreen)

Answer 1

我看到Redux依赖库使用的最常见方法是要求用户在已知的顶级状态键（如combineReducers({myLib : myLibReducer})）中添加库的reducer。这有效，但显然有些限制。

另一种选择是提供一些初始化函数，允许用户传入键名，并让你的lib使用它来适当地设置你的选择器。您可能想阅读我Redux Architecture#Encapsulation的React/Redux links list部分中有关选择器封装的一些文章，特别是Randy Coulman关于"encapsulating the Redux state tree"的文章。最后，您可以浏览我列出的Redux-connected component libs部分内容。

如何使用我的库将我的库中的Redux容器连接到应用程序拥有的商店？

1 个答案: