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

Question

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

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

我可以做出合理的猜测，例如我的库的驼峰命名法。然而，这似乎不是一种可靠的方法，因为 1/用户可能将我的 key 用于其他用途，并且 2/在状态树中只能有我的库的 1 个实例(我可以想到一些场景想要超过 1 个实例)。

这是一个简单的问题示例。我可以创建一个登录 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 的 connect 函数解决了这个问题。模块的 Root 组件具有选择器的上下文，可以从安装 lib 的位置读取数据。

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

Answer 1

我见过依赖 Redux 的库使用的最常见方法是要求用户在已知的顶级状态键处添加库的缩减器，例如 combineReducers({myLib : myLibReducer})。这行得通，但显然有些局限性。

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