问题标签 [redux-store]

我有一个用 react 和 redux 构建的简单的“post-like”应用程序。当用户登录时，他应该看到一个导航栏，当他没有登录时，他应该看到另一个。

我正在使用 redux-devtools 来跟踪状态变化。

问题是，当我登录时，我设置了一个本地存储令牌，而当我注销时，我将该令牌设置为空。这种方法效果很好，当我单击注销时，我在 redux devtools 中看到令牌是假的null，user_authenticated但是当我返回主页或单击浏览器后退按钮时，它会恢复到login状态，然后我可以查看令牌值并is_authenticated设置为 true。

当我刷新页面时，我得到了我想要的行为，即用户注销，令牌设置为 null，然后is_authenticated设置为 false。

奇怪的是，如果我这样做console.log(store.getState())，我会在那里获得更新/预期的状态，但 devtools 显示以前的状态，页面甚至表现得像以前的状态。

登录也是如此，在导航中来回切换会让我回到我第一次访问该页面时的旧状态。

退出后返回主页后，从我的 redux-devtools 中状态。

store.getState()从注销移回后，在同一页面上的状态

下面列出了我的一些组件：

路由.js

索引.js

user_reducer

在我的 CRA 项目中，我有一个configureStore.ts导出我的 redux 存储的文件：

我手动订阅了商店staticIntl.ts，在整个项目中被导入了数百次

但是当我运行项目时，store.subscribe失败是由于

TypeError：无法读取未定义的属性“订阅”

我几乎可以肯定这是由于进口订单/可用性

我设法通过无延迟 setTimeout 将订阅回调推送到任务队列的末尾来“解决”这个问题（我知道它实际上舍入到了几个 MS，但我认为我真的不需要介意这一点):

这安全吗？我主要关心三件事：

1. 即使包裹在 setTimeout 中，订阅是否仍可能由于相同的原因而失败？例如，如果以某种方式处理我的模块需要很长时间
2. 是否有可能在订阅之前发生第一次商店更新（因此在订阅回调调用中丢失）？
3. 由于我的 React 应用程序从服务器获取数据并分派响应，是否会发生这种更新？

我的修复/破解还有其他潜在的陷阱吗？

另外，还有什么其他方法可以解决我的问题？我会特别感谢一个指向正确指南的链接。

我正在尝试实现这种完全相同的行为如何重置 Redux 商店的状态？. 除了我使用的是连接反应路由器。我的配置如下所示：

减速器

店铺

我试过了，但不起作用：

在 mapStateToProps 中，它应该像访问所需状态部分的密钥一样简单，并获取 state 参数，但我无法这样做。

主 app.js 文件

configureStore.js

应用减速器

主要组件（缩小以节省空间）

所以。当我注销 mapStateToProps 正在接收的“状态”时，它是一个 Map，而不是一个对象，看起来像这样：

状态结果

为什么我的状态看起来不像我看过的任何教程？我一直找不到像这样的任何其他示例，除了一个说只是手动迭代的示例 - 但由于这不是“正确”的方式，我必须错误地配置存储

我应该注意到，开发人员工具似乎能够完美地访问状态，并反映我期望看到的内容。为什么我无法访问 state.app.accounts

我只看到 redux 与 React（或者我想是其他流行的框架）一起使用，并且每个状态更改都与 UI 更改有关。我在想是否可以使用与 React 组件完全分离的 redux 来实现事件驱动编程。但是 React 给了我useEffect监听变量变化的钩子。

那么是否redux提供了一个开箱即用的事件监听器？
我想保留useSelector获取所需状态变量的功能，但是我想useEffect用这个变量上的另一个事件侦听器替换，以便执行一些逻辑或调度另一个动作。我不需要渲染某些东西，只需根据应用程序的状态应用某些代码。这只能在redux环境中完成吗？

我有使用 axios 和 Redux 的 react-App。我fetchById在组件中使用了操作，courseDetails.jsx但状态没有更新为新值。由于使用组件从后端获取值需要一些时间，因此fetchById由于先前组件的旧状态（课程）而显示错误。redux-logger在下一个状态中显示正确的值，但组件未使用新状态更新。这是courseDetails.jsx组件代码。

旧状态显示组件中的课程列表lessons.jsx。CourseDetails.jsx尝试渲染组件并希望使单个课程在线显示，let single= useSelector(state=>state.course.list)由于lessons旧状态的值，它会产生错误。 这是代码coursActions.js

这是coursApi.js代码

这是courseReducer.js代码。

这是rootReducer中的combinedReducer

这是store代码

TL;DR：状态更新正确（从 Redux DevTools 查看），但不会在本地存储中持续存在，因为它说状态是“未定义的”（附加屏幕截图）。

说明： 我是 Redux 的新手。我正在尝试将我的状态保存到本地存储。当我从 Redux DevTools 和console.log()statements 中查看时，状态正在正确更新。但是，当我检查应用程序的本地存储时，它显示状态未定义。

我正在尝试做的事情： 每当我按下我的一个组件中的“添加”按钮时，我都会向我的购物车添加一项服务（然后我想将其保存到浏览器的本地存储中）。

以下是 Redux DevTools 和 Browser 的 Local Storage 的截图：

请帮助我找到并解决问题。

这是我的根组件的代码，App.js其中包含我的Redux Store和 localStorage 功能：

在我的Reducer.js中，我只是发送一个INCREASE动作来将新商品添加到购物车中。

有人可以帮我为 mapStateProps 写一个开玩笑的测试用例吗？我到处都阅读了所有问题，但我无法与此相关。

组件代码

减速器：

当我运行覆盖时，它显示此功能未被覆盖，我不知道如何为 mapStateProps 编写测试用例，有人可以帮我解决这个问题。

我的应用是这样的：

盖茨比项目

index.tsx - 应用程序的入口点 - 我调用

HomePage.js 使用mapStateToProps和使用connect(mapStateToProps)(HomePage)

在我的主页中，当然我使用了多个 React 组件。而且我可以利用商店，读/写发生在上面的任何事情HomePage。

在我的主页上，我有指向ActivityPage. 一旦我点击这个页面并在那里登陆 - 问题就开始了。

ActivityPage 利用多个子组件来完成任务。如何从 ActivityPage 访问读/写？

我无法useDispatch在商店中书写甚至阅读。我可以在我的 ReactDev 工具上看到商店，但是在尝试读/写时出现 11 个错误，主要是我需要用<Provider>

我在 Stack Overflow 上阅读了不同的解决方案，这表明我需要拥有mapStateToProps并使用connect我需要访问商店的任何组件。

这不起作用，因为我特别希望从“新页面”访问商店。我需要去为我的子页面创建另一个商店吗？请帮忙。 ：

我正在使用 Redux 存储将页面的阶段保存在 React js 中，但是在刷新页面后，存储的数据再次默认设置为 null。有一种方法可以让 Redux 存储数据，直到用户按下页面上的注销按钮。你知道如何保存状态并且在页面刷新后它不会消失吗？或者有一个我可以看到或阅读的教程？