Redux 待办事项列表示例 - 待办事项状态如何更新取决于可见性过滤器

Question

首先请耐心等待，我是 Redux 的新手。

我正在阅读http://rackt.org/redux/docs/basics/ExampleTodoList.html

总而言之，我明白了要点，但我不太明白

待办事项状态如何更新取决于可见性过滤器。

我的意思是，如果我点击 ie SHOW_COMPLETED，

SPA 仅显示待办事项 completed: true 但为什么呢？逻辑在哪里？我没有看到任何:(

通常在普通脚本中应该是这样的

if state.visibiltyFilter === SHOW_COMPLETED 过滤器状态...

提前致谢。

Answer 1

如果您在智能组件下查看，在 containers/App.js 的底部您会看到：

// This is where the filtering happens
function selectTodos(todos, filter) {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(todo => todo.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(todo => !todo.completed)
  }
}

// Which props do we want to inject, given the global state?
// Note: use https://github.com/faassen/reselect for better performance.
function select(state) {
  return {
    visibleTodos: selectTodos(state.todos, state.visibilityFilter),
    visibilityFilter: state.visibilityFilter
  }
}

// Wrap the component to inject dispatch and state into it
export default connect(select)(App)

过滤发生在您将组件连接到商店时。与其在 state 中存储过滤列表，不如为这个特定组件指定，您应该过滤从商店获得的待办事项，然后再将它们作为 props 传递给组件。

Redux 待办事项列表示例 - 待办事项状态如何更新取决于可见性过滤器

Redux Todo List example - how todos state get updated depends on visibility filter

redux