问题标签 [react-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 回答
2918 浏览

redux - 如何在控制台上显示 Redux 注入的道具

我可以使用Redux. 但是如何console.log(this.props)在运行时使用控制台在控制台上显示 Redux 注入的道具。我不能。我没见过道具。

有没有办法显示从 Redux 商店分配的组件(类)道具,如下面的代码?

0 投票
1 回答
1240 浏览

react-native - React Native,渲染函数不渲染,虽然跟踪表明通过它

受@grabbou的https://github.com/facebook/react-native/issues/6268启发,在此问题末尾添加了解决方案

帷幕升起,出现了第一个场景“Scene1”。Scene1 是一个显示组件,用框架中的 ' connect'包装,react-redux用于将状态和操作绑定到它们的道具。动作工作得很好,并在屏幕上呈现状态,计数器。

向前点击到第二个场景'Scene2',和第一个组件完全一样,但是道具(和Scene1一样) 是passProps在.renderSceneNaviagator

一切正常,动作被正确调度,您可以在跟踪上看到,render调用函数来绘制计数器,再次您可以在跟踪中看到,但不工作!。Scene1 中的内部组件日志!怎么了?

这是跟踪,直接进入 Scene2 并单击两次 <+> 以增加状态。

痕迹

这是一个 bug-Native React?

我在用

  • “反应原生”:“0.19.0”,
  • "react-redux": "4.1.2",
  • “redux”:“3.1.7”,

这是所有的代码,如果你能帮助我。对演示文稿的风格化没有任何让步,因此屏幕上的结果非常简单。

1. index.ios.js的简单代码

2.这是App.js的代码:

2.1还原部分_

2.2 App 根目录,带有ProviderNavigator

2.3. 两个场景中用于渲染计数器的内部组件。有一些跟踪,以显示shouldComponentUpdate被触发并返回 True(你必须更新!)跟踪时间以显示在调度操作后仅几毫秒被调用。和其他显示该render功能已达到,但未在 Scene2 中渲染。痕迹显示这个组件他一直以为是Scene1!!

2.4. 两个场景,是相等的,只是前进或后退的按钮

最后一些“硬拷贝”来展示“表演”

显示计数器的 Scene2 和用于调度操作的两个按钮。单击这些操作不会呈现计数器,但会正确分派这些操作。 显示计数器的 Scene2

只需转到 Scene2 并单击两次 <+> 即可递增计数器。

Counter组件是他的跟踪显示route.name,但它显示在 Scene1 上!这里有什么问题?

痕迹

好了,戏结束了,大幕已经落下。

这是一个非常戏剧性的场景。(只是场景2)

我想知道为什么它不起作用。

本机反应问题?

谢谢大家

解决方案

来自https://github.com/facebook/react-native/issues/6268

@grabbou 启发了这些变化,他建议将所有 App 包装为一个容器,然后将 Store 和 Actions 作为简单的道具传递给所有场景。

要进行这些更改,请创建一个新组件 RootComponent 并将应用程序连接到 Redux Store 和 Actions,如下所示。

然后 App 更改删除 Provider 并将 Scene1 作为哑组件传递,并且 renderScene pass {...this.props} insted of {...route.passProps}

从 Scene1 中的 navigator.push 中移除 passProps,因为在 renderScene 中已经作为默认值传递

这就是所有人!

谢谢

0 投票
1 回答
1238 浏览

redux - Redux 中的微调器加载

在 Redux 中做某种旋转指标的理想方法是什么?

假设我有一个名为Things. 在 React 组件中,我有Thing CardThing Card ListAdd Thing Form.

如果我每次都想旋转微调器,那么理想的方法是什么:*)GET Things从服务器 *)PUT Thing/123到服务器 *)DELETe Thing/123从服务器 *)POST Thing到服务器

我知道这个想法几乎是isPending: true在 Redux Store 中设置一个称为状态的状态。

这就是我所拥有的

但是,这isPending: true是为了什么动作?得到?放?删除?邮政?如果我让所有这些动作都依赖于同一个属性,isPending: true那么奇怪的事情就会开始发生,例如 => 当我执行 a 时POST ThingsisPending暂时是正确的,并且依赖于该属性的其他组件也会显示它们的微调器。

这是我的代码

那么,如果我需要为每个操作表示微调器(或错误),我该怎么办?

我应该做类似的事情吗

看起来方法不对

0 投票
1 回答
555 浏览

javascript - react/redux 应用程序的结构状态

我正在为构建 React/Redux 应用程序而苦苦挣扎——我列出了我尝试解决方案的问题,但没有“感觉正确”,所以希望这里的人可以帮助我。

这是我的组件结构的粗略概念:

这是状态结构(为了完整性而显示的事件处理程序,而不是因为它们明确地是状态的一部分)

选项1:

连接仪表板并根据需要将其传递给孩子。IE,

Connected-dashboard.js

  • 优点:其他一切都可能是“愚蠢的”,单一的事实来源
  • 缺点:对状态了解太多,只是传递下去所需的道具/调度列表会让人读起来难看

选项 2:

构建一个“连接”小部件并在仪表板中使用它。

连接的widget.js

  • 优点:仪表板现在可以是一个愚蠢的容器,无论如何它都是
  • 缺点:Widget 对状态结构了解太多?

选项 3: 构建各个组件的连接版本并稍后组装

连接菜单.js

连接的settings.js

  • 优点:每个组件都获得了它关心的状态片段
  • 缺点:监听状态的组件太多?还有谁“组装”它的问题。

选项 3.1:将状态重组为:

(State 对这种方法比较满意,但不确定它是否重要)

总体而言,这可能是幼稚/显而易见的,但对我来说,权衡似乎是让父母对国家了解太多,或者对孩子的组合方式了解太多。你会如何处理这个问题?

0 投票
1 回答
488 浏览

reactjs - 如何在页面加载时将 redux 中的操作分派到从 websockets 收到的请求?

我正在将 Redux 与 react 一起使用,但遇到了一个问题。在我的应用程序中,我通过 websockets 收听来自 BE 的消息。当应用程序加载时,它应该监听发送的 websocket 消息并调度一些操作。

我怎么做 ?

0 投票
2 回答
3510 浏览

javascript - 带有redux和react的多个注册表单

我一直在尝试开发一个类似于 airbnb 列表表单的仪表板表单,以更深入地了解 react redux,但我被困在我的项目中间。我有一个多重表单,当用户单击继续按钮时,用户将获得另一个表单来填写,依此类推,如果用户单击后退按钮,用户将获得一个带有先前填充值的表单。我无法决定我应该为此做些什么。我是否必须创建一个正在运行的对象作为 listingName 。摘要,姓名,电子邮件等作为空值,并使用 Object.assign() 或其他内容使用 reducer 更新它。到目前为止,我只能开发像当用户点击个人选项卡时,会显示与个人信息相关的表单,当用户点击基本选项卡时,会显示与基本信息相关的表单。我希望在最后一次提交时将所有表单数据发送到服务器。我现在该怎么办 ?我是否对继续和后退按钮使用增量和减量操作并在最后一个表单按钮上使用提交操作?你能给我一个想法吗?

仪表板表格

这是我的代码

动作/index.js

减速器/reducer_active_form.js

减速器/reducer_form_option.js

容器/表单详细信息

0 投票
1 回答
702 浏览

reactjs - React Redux Starter Kit 的生产服务器

我正在使用 DaveZuko 的 React Redux Starter Kit,并且一直坚持如何创建生产服务器来为编译客户端代码提供服务。理想情况下,我只想使用 Koa 服务器并将其移至生产环境,但找不到怎么做。

此处存储库中的所有相关代码均未更改:https ://github.com/davezuko/react-redux-starter-kit

有人知道如何为此编译产品服务器吗?

0 投票
5 回答
36141 浏览

redux - mapDispatchToProps 方法内部的访问状态

我已经使用 redux 编写了一个容器组件,我的实现mapDispatchToProps看起来像这样

问题是,为了 getTableData 我需要一些其他组件的状态。如何在此方法中访问状态对象?

0 投票
1 回答
5355 浏览

javascript - react redux 架构表动作和reducers

我将服务器驱动的数据显示在多个页面的表格中。

我目前有以下表格操作

我在一些需要触发加载的页面上有过滤器。

我有多个使用此功能的实体,它们将共享上述大部分逻辑,但需要单独定义加载功能。

我的想法是有一个将表 ID 作为参数的操作,然后有一个 createTableReducer 函数,该函数也将采用此 ID 并将表节点安装在实体中,类似于react-redux-form中的 createModelReducer

在不使用 redux saga 之类的东西的情况下,如何从我的通用操作中触发实体特定的加载操作?

我想知道创建一个高阶组件并将其传递给加载函数,但我认为这不会解决我的问题。我也可以从表格组件本身调用更改操作和加载操作,但这似乎不是一个好的解决方案。

0 投票
2 回答
415 浏览

react-native - 状态更改未进入子容器

在我的 react native 应用程序中,我使用 redux 来处理Post对象的状态转换——状态由几个子组件更改。该Post对象具有 , 等属性,title用户可以对其进行编辑和保存。namedescription

在减速器中我使用 React.addons.update 返回新的状态对象。

主容器视图有 2 个自定义子组件(包装在 TabBarNavigator 中)。

其中一个子组件几乎没有 TextInputs 正在更新状态。

使用记录器中间件和 console.log() 我在父视图的 render() 中看到了新的状态值(通过 this.props.name),但在子视图中没有。

我试图弄清楚为什么更新的状态没有传播到子容器。任何建议都非常感谢。

我正考虑在子容器中手动订阅 redux 存储,但感觉不对

我的代码如下所示:

主视图

减速机:

应用程序的渲染场景:

配置存储: