问题标签 [mapstatetoprops]

react-redux 中函数的参数mapStateToProps和mapDispatchToProps参数有什么区别？connect

我们有一个 react redux 应用程序。我们有一个绑定到 redux 的父类

这是我们的父类：

现在你看我们有两个孩子。Children1 必须调度自己的方法，但不需要任何绑定到状态（没有 mapStateToProps）

我们的孩子1：

与我们拥有 child2 的方式相同，它也没有任何 mapstatetoprops，但必须调度自己的方法 child2RelatedFooMethodAction。

问题： 我们可以将 child1RelatedFooMethod 和 child2RelatedFooMethod 的调度移动到父组件，将这两个方法添加到父 mapDispatchToProps 列表中，如下所示：

修改了 Parent 的 mapDispatchToProps：

当然我们的 child1 和 2 应该呈现为

再次是父级的渲染方法：

我们完全删除了 Child1 和 Child2 组件中的连接导入 mapDispatchToProps 调用。因为我们之前没有mapstatetoprops，最近又搬了mapdispatchtoprops，所以在child1和child2中我们不需要再使用connect了。

考虑性能时哪个方面更好？累积父级中的 mapDispatchToProps 调用并保持子级简单而无需任何连接使用，或者子级应自行调度 mapDispatchToProps？

情况：

我的 Vuex 商店中有一个 VueJS2 应用程序，其中包含一系列项目：

这个想法是通过这个数组让一个 buefy b-table 组件中的已检查（选定）项目全局可用。b-table 在我的组件中启动，如下所示：

并且商店的状态在组件内映射，如下所示：

问题：

行在视觉上被选中（即复选框在选中/清除之间切换），但商店的 checkedItems 数组没有得到更新。我知道这一点，因为为了调试，我会显示数组的计数，无论我（取消）选择多少项目，它都保持为零。浏览器控制台显示“[Vue 警告]：已分配计算属性“checkedFrqs”，但没有设置器。” 当我选择一行时。

但是我注意到，当我在其中一个组件方法中手动推送一个条目时它会起作用，即：

问题：

如何得到

为 Vuex 阵列无缝工作？（PS 当我使用本地数组而不是 Vuex 商店的数组时，一切正常）

首先，我"react": "^16.13.0",只使用功能组件，而不是类，以及

我在 react 组件中有 2 个组件 -landingPage.js它从 localStorage 获取最喜欢的值，并在初始渲染时将其存储到 redux-store。当我导航到收藏夹组件时，它调用mapDispatchToProps，从 store -> 选择器中获取favsList值并呈现列表。

当我尝试在收藏夹中点击收藏夹（相同组件）按钮时，mapStateToProps没有被调用，因此没有渲染favsList. 虽然我仍然看到 redux 商店中的状态完好无损，但没有改变。

> 问题1： 如果状态没有改变（这里如果favsList 没有更新）mapStateToProps 不会被调用？landingPage.js如果是，为什么当我从tofavorites.js而不是 from favorites.jsto回来时它会起作用favorites.js？

> 问题 2：mapStateToProps在初始组件渲染时触发的替代方法是什么？

编辑添加代码片段：

这是登陆页面：

在上面你我想让你看到

它将 favList 保存到存储。对应的actions.js

• sagas.js：

• 减速器.js

最后，这是

• favorites.js，其中 console.log('inFavs', favList);返回空/空数组

• 应用程序.js

• index.js

我是 React 和 React-Redux 的新手。我正在尝试根据用户 ID 使用动态路径传递“mapStateToProps”。使用的基本代码如下：

如果我手动输入用户 ID，代码可以正常工作。假设用户 ID 是“12345”，然后将该行替换为

任何关于为什么这不起作用的澄清以及使这项工作的替代方法将不胜感激！

在花了几个小时尝试将数据从一个组件传递到另一个组件的各种方法之后，我完全不知道为什么下面的代码不起作用。

目的：我只是想在单击“NavLink”按钮时将“courseID”（一个字符串）传递给应用程序的状态；使 Navlink 打开的组件能够通过状态读取此字符串。

根据 console.log 消息，似乎使用正确的 courseID 值触发了“selectedCourseAction.js”，但 selectedCourseReducer 始终显示初始值并且实际上并未更新。

CourseDetails.js

selectedCourseActions.js _

selectedCourseReducer.js _

对于未来的观众，这里是解决方案（灵感来自 markerikson 的回应）

您需要将 selectedCourseID 引入“CourseDetails.js”组件的 mapDispatchToProps 中。（请参阅下面的一些步骤/代码）

导入 useDispatch()

引入 selectedCourseID 和 dispatch = useDispatch();

更改 NavLink 以引用调度

在 mapDispatchToProps 中添加调度

这就是我通过州的方式。但是，错误提示计数器和 isLogged 未定义。为什么 ？

我正在尝试使用 mapStateToProps 将对象（称为讲座）从状态传递给道具。该对象存在于对象数组中。我相信我犯了一个语法错误，但不确定正确的语法应该是什么，因为下面的代码适用于循环遍历父对象（包含其中的对象）并在父对象中选择正确的对象。

注意：上面的代码将 LectureID 解释为数组中的索引，而不是试图识别对象数组中的对象 ID。我该如何纠正？

不确定正确的语法是什么，但我试图获取在 state 中找到的courseTitle变量的值（字符串），如下所示（当输入 console.log(state) 时：

状态
|_____火库
|______________ 数据
|_____________________“用户 ID”
|________________________“课程 ID”
|______________________________ 课程标题

“userID”和“courseID”是动态变量，其值根据登录的用户和用户选择的课程而变化。courseTitle是一个包含课程标题的变量，是通过 mapStateToProps 读取的内容。

很简单的问题。我正在尝试读取此对象数组中“长度”变量的值（参见图 1）

我的代码