问题标签 [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 投票
3 回答
15156 浏览

reactjs - 如何将 store 明确地作为道具传递给“Connect()”

我正在尝试测试我的 React 组件并收到以下错误。

不变违规:在“Connect()”的上下文或道具中找不到“商店”。要么将根组件包装在 <Provider> 中,要么将“store”作为道具显式传递给“Connect()”。

在测试中渲染组件时出现错误。

在页面上呈现组件时它工作正常。但是在测试中,我无法将商店显式传递给组件。

有人可以指出正确的方向吗?

0 投票
1 回答
170 浏览

redux - 将调度注入将调用操作的组件时,最有效的方法是什么?

将其直接连接到这些组件中,或者在父组件中执行并传递道具。最后一个似乎更优化,您只需创建一个连接实例。你怎么看?

这里有一个例子:

  1. 注入子组件

    /li>
  2. 在父组件中连接(Header)

    /li>
0 投票
2 回答
15571 浏览

javascript - 警告:失败的 propType:在 `DimensionPicker` 中未指定必需的 prop `dimensionName`。检查 `Connect(DimensionPicker)` 的渲染方法

我有以下 Redux+React 组件

和以下容器组件

我还有一个填充初始状态的减速器

我像这样建立我的国营商店

我像这样加载组件

最后这是我加载我的应用程序的方式

我的期望是

  1. 减速器将初始化状态
  2. 容器组件将使用容器组件中的 2 个方法将该状态映射到道具
  3. 最后,当组件加载时,它将具有可用的状态和调度方法。

但这不会发生。相反,我收到了类似的警告

我在这里发布了我的整个代码库

https://github.com/abhitechdojo/MovieLensReact

0 投票
1 回答
1454 浏览

reactjs - 很难理解如何调度动作并将道具/状态传递给子组件

问题:我一直在搜索谷歌,阅读 redux.js.org 文档,查看示例(但每个示例彼此之间以及与我所拥有的不同)并且无法弄清楚如何让我的动作创建者调度我的动作或者我如何调度我的动作创建者的动作,或者传递我的状态等。我只是想将一个简单的待办事项添加到列表中。

期望的结果:我需要一个更好的 ELI5 解释来说明我如何调度我的动作创建者的动作,我如何传递我的 mapStateToProps 的状态,因为这些例子让我感到困惑。我只想在我的列表中添加一个简单的项目并呈现我的项目的当前状态。

我只是想要一些指导,我不是在寻找任何人为我做这件事,到目前为止我一直很享受学习,但这在过去一天左右一直是一堵墙。我希望这些链接足以代表我的应用程序的不同部分。如果需要,可以在此处克隆它: //github.com/laere/therealapp

更新:目前正在努力在单个 JSBIN 中重新创建问题: output

我的代码:

我的商店(reducer/action 创建者): //jsbin.com/zopedipezu/edit ?html,js,output

我的商店所在的主根文件。http://jsbin.com/tapowagobo/edit?html,js,输出

我的主要容器/父组件使 connect() 引用存储。http://jsbin.com/larisifube/edit?js,输出

我的列表组件(哑组件): //jsbin.com/zirozucehi/edit ?html,js,output

我的 ListItem 组件(哑组件):http: //jsbin.com/sijifeqalu/edit ?html,js,output

更新我解决了这个问题。在我的主容器组件中连接到商店后,我能够通过 this.props 传递动作创建者。到其他组件!

0 投票
1 回答
8690 浏览

reactjs - combineReducers 导致代码中断

这是我在此处发布的主题之后

经过大量故障排除后,我发现此代码可以正常工作

但是如果我用一个组合减速器调用替换我的单个减速器,比如

我立即开始通过 DimensionPicker 控件收到未指定强制道具的错误。

所以 combineReducer 方法对我不起作用。

我在这里上传了一个显示问题的示例项目。

https://github.com/abhitechdojo/MovieLensReact

npm install执行 git clone 后必须运行

0 投票
13 回答
477412 浏览

javascript - 如何在超时的情况下调度 Redux 操作?

我有一个更新应用程序通知状态的操作。通常,此通知将是某种错误或信息。然后我需要在 5 秒后调度另一个动作,将通知状态返回到初始状态,因此没有通知。这背后的主要原因是提供通知在 5 秒后自动消失的功能。

我没有使用setTimeout和返回另一个动作的运气,也找不到在线完成的方式。所以欢迎任何建议。

0 投票
12 回答
160934 浏览

javascript - 当 Redux 中 mapToDispatchToProps() 的参数时,'dispatch' 不是函数

我是一个 javascript/redux/react 初学者,使用 redux、react-redux 和 react 构建一个小型应用程序。由于某种原因,当我将 mapDispatchToProps 函数与 connect(react-redux 绑定)结合使用时,我收到一个 TypeError 指示,当我尝试执行生成的 prop 时,调度不是一个函数。但是,当我将 dispatch 作为道具调用时(请参阅提供的代码中的 setAddr 函数),它可以工作。

我很好奇为什么会这样,在 redux 文档中的示例 TODO 应用程序中,mapDispatchToProps 方法的设置方式相同。当我在函数内使用 console.log(dispatch) 时,它说 dispatch 是类型对象。我可以继续以这种方式使用 dispatch,但在我继续使用 redux 之前,我会更好地了解为什么会发生这种情况。我正在使用带有 babel-loaders 的 webpack 进行编译。

我的代码:

干杯。

0 投票
1 回答
3988 浏览

reactjs - React 路由器重新渲染整个应用程序并重置 redux 状态树?

我已经尝试设置 React、redux、react-redux、react-router 和 react-redux-router,但是每次我从一个路由转换到另一个路由时,整个应用程序都会重新渲染,我该如何解决这个问题? 我的意思是,我需要做的至少是顶级组件留在他所在的位置并且不会丢失 redux 状态树,因为路由器转换会重置 redux 状态。

这些是我正在使用的软件包的版本:

“react”:“^0.14.6”,
“react-dom”:“^0.14.6”,
“react-redux”:“^4.0.6”,
“react-router”:“^2.0.0-rc5 ",
"react-router-redux": "^3.0.0",
"redux": "^3.0.6"

这是我的路线配置:

我的默认 index.js 导出:

我的 ConfigureStore.js

最后,reducers 的索引:

0 投票
1 回答
875 浏览

javascript - 无法在 React-Redux 中使用 VictoryBar 绘制条形图

我无法使用 Victory Library for React Components 中的 VictoryBar 绘制条形图。我正在使用我的数据库中的数据,使用 Redux 和 axios 中间件将数据带到最前面。

有效负载正在更新,但是 React 组件的状态只会变得更大。来自 1 个国家/地区的数据给出了一个对象数组 = 26。当我再次单击一个按钮时,它将对象连接到现在是 52 个对象数组。这会使图形倾斜,因为它没有刷新数据。


VictoryBar:React 的 VictoryBar 图表

我不确定如何更新图表的状态,以便在更新输入框中的输入时更新图表。我this.state.processed用来更新VictoryBar. this.props.waterData是从 Redux Promise 收到的数据,它会返回每个国家/地区的正确数据,但是this.state.waterData每次我单击 Plot Graph 时,它都会连接到 . 每次单击 Plot Graph 时,我都希望它生成一个新图。


那是我的错误,我已经解决了这个问题,并尝试了多种方法来在单击 Plot Graph 按钮时更新组件的状态。为了更清楚起见,我将粘贴我的动作减速器,也许是我在这里尝试完成的屏幕截图。

动作减速器 (get_water_data.js)

更新了有效的代码,但是我正在改变数组并且我正在使用拼接,这不是在屏幕上呈现新数据的正确方法,每次我单击 Plot Graph。我希望以正确的方式实现这一点,但我认为我不知道如何。

Victory 条形图显示各国水资源得到改善

0 投票
1 回答
455 浏览

reactjs - 通过 passProps 和 Navigator 传递 Redux 状态或在 Container 内绑定状态的区别

Reduxreact-redux测试React Native,我发现如果状态不是通过 Container 传递的,Redux 的状态树的内容不会反映在显示中。

为了测试这个我使用

  • 反应原生 0.19.0
  • 反应还原 4.1.2
  • 还原 3.1.7

正如@alinzin 在https://github.com/alinz/example-react-native-redux中解释的那样,其中包含设置此项目的所有技巧。还有其他好的解决方案吗?

下一个例子展示了一个简单的字符串作为 Redux 存储中的状态,以及一个简单的操作来扩大字符串。

这是在状态中作为单个字符串的 reduce 和数据。

注册的App就是这样,没什么新意。初始路由启动 App1Component 的容器。这是良好的绑定状态和组件的方式(我相信)

组件 App1Component 和 App2Componenet 的主要内容是一个简单的组件,只显示字符串,并显示一个“按钮”来调度放大操作。

组件 App1 和 App2 之间没有区别。只是 App1Component 通过容器调用(并绑定状态和操作),并且通过使用 Navigator 推送所有相同的道具(在 App1Component 中相同)调用 App2Component(从 App1Component)

这是带有按钮的 App1Component,用于将下一个场景推送到 App2Component 并在通过 Container 绑定之前传递相同的道具。

如果您在此处按“放大”,则字符串被放大,您可以看到屏幕上反映的动作。您还可以在 chrome 中看到 redux 记录器的跟踪。

这里是 App1Component 的包装容器

这里是组件 2,带有后退按钮。如果您在此处按“放大”,则字符串会被放大,确保您可以在 chrome 上看到痕迹,但是……该动作不会反映在屏幕上。

按 Back 后,您可以在屏幕上看到 App1Component 的字符串已修改。

如您所见,我误解了一些基本的东西,但不是。

我必须用容器装饰所有主要组件(页面/场景)吗?为什么在 Navigator 中通过 passPros 传递道具(之前由容器绑定)是错误的?动作被正确分派,但不会反映在屏幕上。

欢迎任何帮助。谢谢