javascript - 顶级 reducer 中的 redux 状态选择器

Question

看完new egghead course由 Dan Abramov 撰写，我对提到的选择器有疑问。

选择器的目的是向组件隐藏状态树的详细信息，以便在树发生变化时便于以后管理代码。

如果我理解正确，那意味着在 mapStateToProps 中调用的选择器应该只存在于顶级 reducer 中。因为传递给 mapStateToProps 的 state 是整个应用程序状态树。如果这是真的，随着应用程序的增长，我可以想象管理顶级选择器会变得非常困难。

我是否没有理解这里的概念？还是这是一个合理的担忧？

编辑:试图让我的问题更清楚。

说我的整个状态开始于{ byIds, listByFilter } 我有

export const getIsFetching = (state, filter) =>
  fromList.getIsFetching(state.listByFilter[filter]);

在我的顶级 reducer reducers/index.js 中，组件将简单地使用 getIsFetching 将整个状态传递给 is，这完全没问题，因为它是顶级水平。

但是，后来我决定我的整个应用程序将包含一个待办事项应用程序和一个计数器应用程序。因此，将当前顶级 reducer 放入 reducers/todo.js 并创建一个新的顶级 reducer reducers/index.js 是有意义的，如下所示:

combineReducers({
  todo: todoReducer,
  counter: counterReducer
})

那时我的状态会是这样

{
  todo: {
    byIds,
    listByFilter
  },
  counter: {
    // counter stuff
  }
}

组件不能再使用 reducers/todo.js 中的 getIsFetching，因为 getIsFetching 中的状态现在实际上正在处理 状态.todo。所以我必须在顶级 reducer reducers/index.js 中导出另一个这样的选择器:

export const getIsFetching = (state, filter) =>
  fromTodo.getIsFetching(state.todo);

只有在这一点上，组件才能使用 getIsFetching 而不必担心状态形状。

然而，这引起了我的担忧，即组件直接使用的所有选择器都必须存在于顶级 reducer 中。

更新 2:本质上我们是从最深层次一直导出选择器到顶层 reducer，而中间 reducer 中的所有导出都没有使用它们，但它们在那里因为 reducer 知道该级别的状态形状。

这非常类似于将 props 从父级一直传递给子级，而中间组件不使用 props。我们通过 context 或 connect 避免了这种情况。

为糟糕的英语道歉。

Answer 1

因此，虽然 mapStateToProps 确实采用了整个状态树，但您需要从该状态返回您想要的内容以呈现您的组件。

例如，我们可以看到他调用了 getVisibleTodos 并传入了 state(以及来自路由器的 params)，然后返回了一个列表过滤后的 todos:

组件/VisibleTodoList.js

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

通过调用，我们可以看到商店正在使用 combineReducers(尽管只有一个 reducer)，因此，这需要他将状态树的适用部分传递给todos reducer，当然是 state.todos。

reducer/index.js

import { combineReducers } from 'redux';
import todos, * as fromTodos from './todos';

const todoApp = combineReducers({
  todos,
});

export default todoApp;

export const getVisibleTodos = (state, filter) =>
  fromTodos.getVisibleTodos(state.todos, filter);

虽然 getVisibleTodos 返回一个 todos 列表，它是顶级 state.todos 的直接子集(同样如此命名)，我相信这只是为了简化演示:

我们可以轻松地编写另一个组件，其中有一个 mapStateToProps 类似于:

组件/NotTopLevel.js

const mapStateToProps = (state, { params }) => ({
  todoText: getSingleTodoText(state, params.todoId),
});

在这种情况下，getSingleTodoText 仍然接受完整的 state(以及来自 params 的 id)，但是它只会返回 todo 的文本，甚至不会返回完整的对象或顶级 todos 的列表。因此，再次强调，真正由您决定要在渲染时从商店中提取什么并填充到您的组件中。