【发布时间】: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