Question

我正在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的初学者。

Answer 1

应该在reducer文件中。

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

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

Answer 2

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

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

如您在示例中所见，该代码段具有mapStateToProps函数。

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

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

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

2 个答案: