如何确定一段代码在 ReduxJS 中应该放在哪里？答案

【问题标题】：How to determine where a piece of code should go in ReduxJS?如何确定一段代码在 ReduxJS 中应该放在哪里？
【发布时间】：2018-11-21 01:01:31
【问题描述】：

我正在通过https://redux.js.org/basics/usagewithreact 学习教程

但是，我坚持以下，因为作者没有告诉您将以下代码放在哪里。

我正在做“实现容器组件”：

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    case 'SHOW_ALL':
    default:
      return todos
  }
}

const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

这是需要放入其中一个已创建文件的代码，或者可能是一个新文件。然而，文章没有说明在哪里或如何做到这一点。我是 nodejs、reactjs 和 reduxjs 的初学者。

【问题讨论】：

Russell，您是如何获得以下帮助的？
我的回答是否提供了足够的帮助来解决您的问题？

标签： reactjs react-redux

【解决方案1】：

此代码肯定会进入您的组件。更准确地说，如果你将你的组件分成 presentational components and containers 这应该进入你的容器。

要使用 connect()，您需要定义一个名为 mapStateToProps 的特殊函数，该函数描述如何将当前 Redux 存储状态转换为您想要传递给正在包装的展示组件的 props。

正如您在示例中看到的，sn-p 有一个mapStateToProps 函数。

getVisibleTodos 只是一个“选择器”，用于将状态转换为您的组件可以使用的东西。查看reselect 库，了解更高级的选择/缓存/组装 redux-store 值的方法。

Here 你会找到一些与 redux.js.org 上描述的示例相对应的 github 项目。例如todos example 存储库。看看项目的结构和where the code goes exactly。

【讨论】：

【解决方案2】：

它应该放在reducer文件中。

您可能想查看完整的文档 here 关于 redux reducer 的使用。

它包含不同的教程，但可能会帮助您解决文档页面中的问题。

【讨论】：

上面代码中的switch case确实像reducer，但不是:)