【问题标题】:Redux: Better way for private/public selectorsRedux:私有/公共选择器的更好方法
【发布时间】:2019-04-16 01:15:02
【问题描述】:

正如this course 建议的那样,私有选择器重复作为公共选择器用于完整状态。

  • 切片上使用的私有选择器。
  • 在完整状态下使用公共选择器。

但这会导致:

  • 重复代码
  • 泛滥公共选择器的命名空间

有没有更好的方法来组织选择器?

原例:

Root Reducer 和公共选择器:

// reducers/index.js
import todos, * as fromTodos from './todos';

// Reducer
export default combineReducers({
    todos
});

// Private selector
getVisibleTodos(state, filter) {
    return fromTodos.getVisibleTodos(state.todos, filter);
}

Slice Reducer 和私有选择器:

// reducers/todos.js

// Reducer
export default (state, action) => {
    switch(action.type){
    case 'ADD_TODO':
        // ...
        break;
    // Handle other actions ...
    }
}

// Private selector
getVisibleTodos(state, filter) {
    switch(filter) {
    case 'all':
        return todos;
    case 'completed':
        return state.filter(t => t.completed);
    // Other cases ...
    }
}

使用选择器:

const mapStateToProps = (state, {params}) => ({
    todos: getVisibleTodos(state, params.filter || 'all')
});

【问题讨论】:

  • 你能提供一个可行的例子吗?
  • 我已经增强了这个例子。请注意将选择器重新定义为私有选择器,另一次重新定义为公共选择器。问题在于避免这种重复。
  • 选择器通常是纯函数,因此可以毫无问题地移动到它们自己的模块中。对于灵感,我会看看reselect

标签: javascript redux react-redux


【解决方案1】:

将私有选择器复制为公共选择器有一些优点和缺点。

我相信,在分离关注点和封装逻辑方面,重复对您有好处,即,每当您必须更改从 redux 状态获取某些数据的逻辑时,您不应该修改您的组件。 此外,您的组件不应拥有对与其相关的状态部分进行切片的逻辑。

但是,它确实会导致一些不必要的重复。 我可以想到一个带有glob 库的解决方案,但它可能需要您在单独的文件中列出所有选择器。 使用 glob,您可以遍历选择器文件夹中的所有 js 文件(您可以增加复杂性以忽略某些查看其实例原型的文件以及其他文件)并将它们合并到您的根 reducer 文件中。 我已经看到这种技术在 express 应用程序中使用,通过为每个路由创建一个 js 文件将所有路由组装在一个地方。

希望它清楚并帮助你。

编辑 --> 我强烈建议您查看this article,以全面了解为什么在根减速器中将私有选择器复制为公共选择器是有益的(尽管我知道开始认为您也可以将公共选择器放在单独的文件中......)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-12-06
    • 2011-12-08
    • 1970-01-01
    • 2011-09-19
    • 2014-06-06
    • 2011-10-16
    • 2011-04-18
    相关资源
    最近更新 更多