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

javascript - 试图自己调度一个动作

当服务器抛出 401 响应时,我通过请求新的身份验证令牌来处理错误,之后我需要继续处理实际需要发生的请求。因此,我无法将类方法作为范围访问,即在响应中未定义。

关于这种情况还有其他选择吗,我非常愿意听。

0 投票
1 回答
441 浏览

reactjs - 实现 React Redux

我正在慢慢学习 React,也正在学习用 Redux 来实现它。但我似乎遇到了障碍。这就是我到目前为止所拥有的。

/index.jsx

/actions/items.js

/reducers/reducer.js

/reducers/index.js
更新:

/components/Item.jsx

/components/Items.jsx

这个也试过

更新:

经过多次尝试,Gitter 中的@hedgerh 指出它应该是 state.items 。所以解决方案是

也归功于@azium。

/components/App.jsx

为了正确实施它,我在这里缺少什么?现在它打破了Uncaught TypeError: Cannot read property 'map' of undefinedItems.jsx. 我想这是有道理的,因为它似乎没有正确连接。这是应用程序的第一部分,第二部分将允许用户创建许多列表,这些列表包含许多项目。我可能不得不从中提取方法,Item.jsx因为它们List.jsx会做几乎相同的事情。谢谢

0 投票
1 回答
65 浏览

javascript - 为什么使用字符串而不是直接方法调用来触发 Redux 存储中的操作?

将字符串传递给 Redux 存储以触发操作而不是简单地在存储上指定其他方法并直接调用这些方法有什么好处?似乎后者可以让人们避免一堆iforswitch语句。例如,来自 Redux 文档:

替代:

0 投票
1 回答
274 浏览

express - 使用 React/Redux/Express 的服务器渲染 SyntaxError

我正在尝试从服务器获取我的应用程序渲染,因此试图从这里实现 ServerRendering 示例:http ://redux.js.org/docs/recipes/ServerRendering.html

我可以成功运行 server.js,但是一旦我加载了 localhost,就会收到“Uncaught SyntaxError: Unexpected token <”错误@ bundle.js:2。我相信它与 renderFullPage() 函数有关:

如果我删除该行<script src="/dist/bundle.js"></script>,错误就会消失,但是计数器不起作用。

这是错误引用的 bundle.js:

捆绑.js

它应该在我的 dist 文件夹中引用 bundle.js 但不是出于某种原因?如果我使 index.html 文件与 renderFullPage 返回的文件完全相同,除了摆脱${html}<script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

然后计数器工作正常。当我进行服务器端渲染时,客户端似乎找不到 bundle.js 代码,因此创建了一个与从服务器接收到的代码完全相同的代码,因此当它运行到 html 时出现错误它期待javascript。

0 投票
1 回答
213 浏览

javascript - ReactJS,Redux:如何在我的状态中返回一组项目?

我无法从 api 调用返回的结果中取回 1 个数组项。

这是行动中的功能。

我的减速机

我期待 2 个结果,follow_check_list : action.result所以在我的状态下我应该看到

但相反,我看到:

更新 我的组件。arrayIds 有 2 个项目。

提前谢谢各位

0 投票
0 回答
132 浏览

redux - 为什么在 dispatch() 之后 reducer 没有被激活

当我提交我的登录表单时validateAndSignInUser,会调用这个signInUser发送到后端的电子邮件和密码以获取会话令牌。那行得通。signInUser发送返回值后signInUserSuccess,我验证了它的工作原理。但在那之后,UserReducer 没有被激活,我不明白为什么。怎么了?

我有这个动作SignInFormContainer.js

这三个动作在UserActions.js

这是我的减速机UserReducer.js

减速机组合:

configureStore.js

index.js

0 投票
2 回答
2621 浏览

reactjs - 在 redux 中修改响应数据的合理位置在哪里?

使用 React、Redux 和 Thunk 的组合,我有以下内容:

动作.js

减速器.js

上面的两个片段坐得很好,我觉得它们符合 Redux 的意图。我现在想在响应中返回的字段到达容器之前对其进行一些修改。

例如,响应可能是:

我想将其更改为(为简单起见的简单示例):

迄今为止的研究

选项一 查看 Redux 上的异​​步示例,我可以看到这里的响应很轻松: https ://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

选项二 查看其他 Stackoverflow 问题,它让我相信将其排除在操作之外更有意义,因为 reducer 应该是修改状态的东西(但也许这并不能真正算作状态?): Redux - 在哪里准备数据

选项三 我倾向于认为这是中间件的工作——这就是 normalizr 处理它的方式,但我找不到任何非被动中间件示例。如果中间件是这里的选择,中间件应该调度某种 SET_STATE 动作,还是可以自由地在中间件中更新状态?

编辑

试验了一些中间件,比如:

它似乎工作正常 - 这确实是中间件的意图吗?原始问题成立 - 理想地点在哪里?

0 投票
3 回答
4098 浏览

reactjs - 如何用 redux 组织“子应用程序”?

我正在开发一个非常大规模的应用程序,并且很感谢您提供一些建议。我有一个应用程序包装器react-redux <Provider>,它有子应用程序列表。

子应用程序非常复杂,将它们的一些组件用作容器会很方便,所以使用mapStateToPropsand mapDispatchToProps. 但是,使用mapStateToProps是不可能的,因为store是根对象,我们不知道当前子应用在appState.

将来我计划将这些子应用程序分开,然后放入自己的网络工作者线程中。在这种情况下,也许可以使用多个商店并将商店发送到主线程并将其作为主商店的一部分?

有很多方法如何处理这种情况,基本上,问题是如何处理带有redux框架的子应用程序。也许你们中的一些人遇到了类似的问题,或者只是知道如何以最好的方式解决。

0 投票
4 回答
6288 浏览

javascript - 在 react-router 中调用 getComponent 时如何显示加载 UI?

我对 React 真的很陌生,当使用 getComponent 加载路由时,我不知道如何呈现“正在加载...”屏幕。getComponent 调用工作正常并显示组件,但 UI 上没有任何迹象表明请求和响应之间正在发生任何事情。这就是我想要弄清楚的。

在尝试使用 onEnter 或在 getComponent 函数中强制“加载”组件显示失败后,我想也许我应该尝试使用 Redux 将加载状态设置为 true/false 并让我的主视图组件显示加载屏幕:

如果我使用操作手动设置加载状态,这似乎可行,这是我想要做的。但是(我觉得这将是一个真正的菜鸟问题)我无法弄清楚如何从路由器内部访问商店/调度程序。

我不确定我是否使用了错误的搜索词或其他什么,但我完全没有想法,每个 react-router/redux 教程似乎都跳过了我认为必须是一个常见问题的问题。

谁能指出我正确的方向(如果我正在做的事情是最佳实践,也让我知道?)?

编辑:我会尝试进一步澄清这一点。在第一个代码块中,您可以看到,如果我单击一个<Link to="/about">元素,则会触发 getComponent 函数,该函数将延迟加载 About.jsx 组件。我遇到的问题是我无法弄清楚如何显示某种加载指示器/微调器,它会在单击链接后立即出现,然后在组件加载后将其替换。

更多编辑:我已经尝试创建一个用于加载异步路由的包装器组件,它似乎可以工作,但是感觉真的很hacky,我确信这不是正确的方法。路由代码现在如下所示:

AsyncRoute.jsx 页面如下所示:

如果有人有更好的想法,请告诉我。

0 投票
1 回答
758 浏览

javascript - 无法使用 React.render 渲染元素 - ReactJS

我是 ReactJS 的初学者,所以这可能是一个非常基本的问题。

以下是我在控制台中引发错误的代码 -SyntaxError: expected expression, got '<'

我从这里开始关注 tut - Scotch Tut Link但在第一步无法找出我做错了什么。

仅供参考 - 当我在页面源代码中检查时,库文件的路径是正确的。