问题标签 [redux]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
443 浏览

javascript - Webpack-dev-server,redux,同构反应路由器不变错误

通过 webpack 开发服务器运行我的服务器时,我收到此错误:

我的客户端入口文件如下所示:

一切都在服务器端正确呈现,问题是当我在客户端有这个路由器代码时。看起来路由器正在尝试像服务器大小的路由器一样工作,即使它正在客户端上运行。

我使用的版本是:

0 投票
3 回答
26653 浏览

javascript - 如何将方法放到 Redux 状态的对象上?

根据文档,反应应用程序的状态必须是可序列化的。那上课呢?

假设我有一个 ToDo 应用程序。到目前为止,每个项目都具有诸如等之类的Todo属性。现在我想对不可序列化的对象使用方法。即,它会重命名 todo 并做很多其他的事情。namedateTodo.rename()

据我了解,我可以在某处声明函数,并rename(Todo)通过道具将该函数传递this.props.rename(Todo)给组件。

.rename()我在某处声明有两个问题:1)在哪里?在减速机?would be instance在应用程序周围的减速器中的某个地方很难找到所有方法。2)传递这个函数。真的吗?我应该从所有更高级别的组件手动传递它吗?每次我有更多方法时,都会添加大量样板来传递它?或者总是这样做并希望我对一种类型的对象只有一种重命名方法。不Todo.rename() Task.rename()Event.rename()

这对我来说似乎很愚蠢。对象应该知道可以对它做什么以及以何种方式。是不是?

我在这里缺少什么?

0 投票
1 回答
11277 浏览

javascript - 使用 redux 时,react 组件中应该如何处理取消订阅?

在我的组件中,我有以下内容:

不调用 unsubscribe 会导致以下错误:

警告:setState(...):只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。

我想知道的是我应该分配unsubscribethis它还是有更好的地方分配它?

0 投票
2 回答
1682 浏览

reactjs - 具有关系数据存储的列表和项目之间的关系(使用 react-redux)

我使用 React 和 Redux 作为我的商店。我也在使用 react-redux 库来集成两者。我的商店包含两组数据:

  • 任务 { id,名称,assigneeId }
  • 用户 { id, name }

我有一个 TaskListComponent (使用 react-redux)connect-s 到我的商店,使用:

我需要两者,因为列表有一个过滤器允许搜索我的任务名称或用户名 - 我的组件需要“用户感知”。

该组件列出了另一个名为 TaskItemComponent 的组件,它显示任务名称和分配用户的名称。

我正在努力决定解决任务分配用户的最佳方法。

  • React 指南告诉我,Item 组件应该将 Task 作为 prop,并在 render 函数中解析 User 本身。但是,这要求组件具有存储感知能力,并且使用 react-redux 库,它似乎并没有被设计为允许组件在不被connect-ed 访问存储的情况下访问它。

  • 或者我可以解析列表中的用户并将其与任务一起传递给 Item 组件,例如<TaskItemComponent task={task} assignee={resolveTaskAssignee(task)} />. 这样做的好处是让我的项目保持“哑”,并且意味着我不需要让它监听商店的变化(甚至不需要了解商店)。

任何意见,将不胜感激。

0 投票
2 回答
1233 浏览

javascript - Redux:数据源实现

我是 react 和redux的新手。

问题:在 redux中实现“数据源”(类似于 kendo-ui数据源)的最佳方法是什么?

我试图将我所有的小部件数据源存储在一个地方(我创建了数据源缩减器)并将数据源“绑定”到它的小部件(如表格小部件、列表视图、组合框等)。数据源必须有它自己的 api(如 addFilter、addSort、getFiltered 等)并且还存储应用的过滤器和数据。

我想将所有数据源存储在 redux 存储中(这就是为什么我需要在创建小部件之前创建数据源并调度它的创建)。

问题是当我为我的“智能”小部件的容器组件创建 react-redux 连接器时,我需要发送带有道具的数据源,但此时尚未创建数据源。

如果我发送虚拟初始数据源(不发送它的创建和数据填充)然后发送它并在 componentDidMount 上向它填充数据 - 我的小部件的渲染函数调用了两次

我想我需要某种“包装器”功能,但现在我不知道该怎么做。

也许有一些如何实现“数据源功能”的例子?

0 投票
1 回答
1652 浏览

javascript - Redux + React-router 组件不渲染

因此,我尝试使用此示例React-router进行配置,以设置基本应用程序。Redux

当我尝试渲染我的组件时,我收到 1 个错误和 2 个警告。

错误是:Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

警告 #1:Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

警告#2:Warning: Only functions or strings can be mounted as React components.

我刚得到两个简单的组件。一个Root组件和一个Container组件来测试一切是否正常。

根组件的内容:

Container 组件的内容:

以防万一 - 减速器的内容:

0 投票
1 回答
403 浏览

javascript - 在 jspm/system.js/babel 中使用 redux-devtools

将 jspm / system.js 与 Babel 转译器一起使用时,我在控制台中看到以下错误

如果我将该行注释掉react/themes/index.js,我(正如预期的那样)不再看到该错误。

但是,我确实看到了这一点;

这似乎与 DevTools 有关。

这是我尝试使用它们的方式;

这是我的 package.json

如果我设置__DEVTOOLS__ = false,我看不到任何错误,并且应用程序按预期呈现。

我的实现基于这个 webpack 示例,它工作得很好: https ://github.com/emmenko/redux-react-router-async-example

我究竟做错了什么?

0 投票
8 回答
275338 浏览

javascript - 为什么使用 Redux 而不是 Facebook Flux?

0 投票
2 回答
536 浏览

javascript - 客户端路由的缺点?

我正在构建一个通用/同构的 javascript 应用程序(Express/Redux/React)。我正在考虑使用 React Router 在客户端路由和/或使用 Express 在服务器上路由。

我知道客户端路由已经在单页应用程序中变得流行,因为它们使用户交互更加无缝。

但是,我试图更好地了解客户端与服务器端路由。在构建任何应用程序(单页与否)时,有人可能会遇到客户端路由的潜在缺点是什么?什么时候最好考虑在服务器上进行路由?大型应用程序是仅在一侧(客户端/服务器)路由还是经常将两者混合?

谢谢!

0 投票
1 回答
2473 浏览

javascript - 使用 mocha 对反应组件进行单元测试

我正在研究Redux生态系统的 TodoMVC 示例。我已经完成了示例的工作代码,现在正在为应用程序的每个元素创建测试。

对于 action 和 reducer,测试非常简单,但对于组件,编写测试证明更具挑战性。

我的通用组件架构如下所示:

为 TodoInput.js 编写单元测试相对简单:

TodoInput.js:

TodoInput-test.js:

但是对于 TodoItem.js,测试有点棘手。

渲染代码根据是否editing在项目上设置了标志进行分支:

TodoItem.js:

我对如何编写测试感到有些困惑,例如,该测试将验证双击组件是否已成功将状态设置为editing: true.

通常,我将测试分为两部分,“渲染”和“事件”,即 TodoItem-test.js:

但在这种情况下,我想看看双击组件是否会导致以下结果:

  1. 组件状态现在应该有一个editing与之关联的标志
  2. 应该已经改变了elementTodoItem.js现在应该渲染一个<TodoInput/>组件。

针对这种预期行为构建测试的最有效方法是什么?我在想我应该做两件事:

首先,测试看看双击组件是否添加了预期的"editing: true"标志。我不知道该怎么做。如果我按如下方式设置测试:

如何进行测试以确保已设置编辑标志? liComponent.props.editing返回undefined.

其次,进行context("if the component is editing mode")测试以确保正确呈现以下内容:

我也不确定如何进行严格的测试。