问题标签 [react-redux]

最近我为一个应用程序做了这个，我想知道这是否会被认为是一种不好的做法，或者它是否可以。假设我有一个 reducer 监听两个动作：

所以流程是：

• 我派遣PRE_FETCH_ACTION
• 我对外部 API 进行 fetch 调用
• 当服务响应返回时，它会分派FETCHED_SUCCESS

如果有人尝试在不分派第一个数据的情况下获取数据PRE_FETCH_ACTION，则代码将引发错误。

好的，所以这工作得很好。正如我所说，我担心这是否会被认为是一种糟糕的模式。为什么我会这么认为？因为isAllowed状态部分是 reducer 内部的，它不会影响任何组件的渲染方法。

我对此有一个概念证明，这似乎可行，但我的一部分想知道这是否真的是一个好主意，以及是否有使用 Redux 之类的更好的解决方案或替代策略。

问题

基本上，我的整个应用程序都有一个基本的 React 组件，它有一堆你可能期望的典型组件，页眉、菜单、页脚等。

在我的树下（更远），我有一个组件，如果我可以在我的标题组件中安装一个新的菜单项，那将是很棒的。标头组件当然位于我的应用程序的顶部，因此访问被拒绝。

这只是一个这样的例子，但这是我从多个角度遇到的问题。

我的疯狂解决方案

我研究了使用 React 的上下文来公开允许子组件声明它们希望出现在标题中的任何其他元素的函数。

在尝试了这个概念之后，我最终将它重构为一个非常通用的解决方案，本质上是一个 React Element 消息传递系统。此解决方案分为三个部分。

1. 提供者

单实例组件与 Redux 的 Connect 组件非常相似。她本质上是接收和传递消息的引擎。她的基本结构（以上下文为中心）是：

2.制作人

更高阶的组件。每个实例都可以通过produceElements上下文项“生成”元素，为特定命名空间提供元素，然后通过removeElements.

3. 消费者

更高阶的组件。每个实例都配置为“监视”附加到给定名称空间的元素。它用于consumeElements通过回调函数注册“开始”监听并stopConsumingElements取消注册消费。

---

这是对我打算做的事情的粗略概述。基本上，当您查看它时，它是一个消息传递系统。也许可以进一步抽象。

我已经玩了 redux，猜猜 Redux 有什么用？所以我不禁觉得，虽然这对我有用，但也许这不是一个好的设计，我不经意地站在了 Redux 的脚趾上，或者产生了一个普遍的反模式。

我想我没有直接使用 Redux 的唯一原因是因为我正在生产元素，而不是简单的状态。我可以沿着创建元素描述符对象的路线走，然后通过 Redux 将其传递下去，但这本身就很复杂。

---

有什么智慧之言吗？

---

更新 1 号

对上述内容进行一些补充说明。

这允许我在我的完整组件树上上下，甚至从左到右注入元素。我知道大多数 React Context 示例都描述了将数据从祖父组件注入到孙子组件中。

此外，我希望上述实现能够从开发人员那里抽象出任何有关上下文使用的知识。事实上，我很可能会使用这些 HOFS 来创建特定于用例且更加明确的额外包装器。

IE

消费者实现：

生产者实现：

我认为这很明确，也很容易理解。我确实喜欢我可以在最关心的地方创建按钮，这使我能够与同行建立更牢固的关系。

我也知道 redux flow 可能是正确的想法。感觉就像我让自己变得更加困难 - 我不禁认为这种技术可能有一些优点。

有什么理由这特别是一个坏主意吗？

---

更新 2

好的，我现在确信这是一个坏主意。我基本上是在破坏应用程序的可预测性，并取消单向数据模型提供的所有好处。

我仍然不相信使用 Redux 是这种情况下的最佳解决方案，我已经构想了一个更明确的单向解决方案，它使用了上面的一些概念，但没有任何上下文魔法。

如果我认为可行，我会发布任何解决方案作为答案。如果做不到这一点，我会去 Redux 并责备自己没有早点听你们的。

---

其他示例

以下是一些其他项目/想法，试图使用各种技术解决相同的（ish）问题：

https://joecritchley.svbtle.com/portals-in-reactjs

https://github.com/davidtheclark/react-displace

https://github.com/carlsverre/react-outlet

我需要对此有新的看法。当我慢慢学习 React 和 Redux 时，我又遇到了障碍。

/components/Item.jsx

/components/Items.jsx

/reducers/items.js

我不确定为什么单击x按钮删除项目会删除所有项目。在此先感谢您的帮助

我已经为此奋斗了太久，有人可以指出我正确的方向吗？问题：当我创建一个列表时，我可以更新/删除它。我还可以向其中添加项目并更新/删除这些项目。当我添加另一个列表时，前者的项目会转移到后者，然后我无法编辑这些项目。如果我删除列表并且不刷新浏览器，则项目仍在列表中。我需要一种方法将两者联系在一起，以使列表只知道其项目在此先感谢您的帮助。

/actions/lists.js

/actions/items.js

/reducers/lists.js

/reducers/items.js

/components/List.jsx

/components/List.jsx

/components/Items.jsx

/components/Item.jsx

/components/App.jsx

我正在尝试使用react&redux以及webpack. 就目前而言，我刚刚整理了基本框架，但是运行构建似乎总是会导致以下错误：

据我所知，它所抱怨的javascript文件中的所有内容似乎都是正确且有效的：

./app/views/index.js

./app/views/wrapper.js

./app/views/home.js

./app/index.js

在配置方面，我有以下几点：

包.json

webpack.config.js

我完全被这个错误难住了。如果有人对我哪里出错有任何想法，请告诉我。谢谢！

我有一个使用 React + Redux + Normalizr 的应用程序，我想知道在entities.

如果我只更改实体中的一个实体，它将重新渲染所有组件，而不仅仅是需要该特定实体的组件

我是 react-redux 的新手，我正在尝试组合一个小的 Web 应用程序，同时我会学习最佳实践并了解框架。我的问题是生态系统是如此多样化，以至于我并不总是确定为什么事情看起来不同。

我正在查看下面的样板， https://github.com/choonkending/react-webpack-node/blob/master/app/containers/LoginOrRegister.jsx

我的代码在大多数情况下是相同的，但是虽然看起来调用了动作，但它没有到达减速器，或者调用了动作但实际上没有调度。

我无法让它工作，我只是不知道我在那里缺少什么，这让我觉得很愚蠢。

我的 configureStore 看起来像下面这样，我看不出我应该做些什么不同

---

半答案

问题原来是承诺中间件。

我以前使用的样板是使用自定义中间件，如下所示

在我的代码中，我选择导入一个 npm 包，没有特别的原因，我只是想使用一个积极维护的存储库。 https://www.npmjs.com/package/redux-promise-middleware。

一旦我隔离了问题，我就切换到这个，一切正常。https://www.npmjs.com/package/redux-promise。

@dannyjoile 说得对，configureStore 出了点问题。当我导入 redux-promise-middleware 时，这些操作不会达到 reduce。我不知道为什么，老实说我还不太了解 redux 中间件。

我在github上得到了所有东西，如果有人想看看。 https://github.com/ap-o/react-redux-material-passport

敲我的头。我已经熟悉了典型的 ReactJS 和 Redux 应用程序，并且正在开发自己的应用程序。问题是当使用 combineReducers() 为 Redux 存储创建单个 reducer 时。我目前有三个减速器，当它们作为 createStore() 的减速器参数添加时，它们本身可以正常工作。第一个 reducer 包含我所有的操作，被称为：

HeaderReducer

第二个和第三个 reducer 是使用 ImmutableJS 构建的，用于为单独的列表传播一些虚拟内容。同样，这些减速器单独工作，但在 combineReducers() 组合它们时不会。第二个reducer文件被称为：

列表项

第三个文件称为：

报价单

我通过 reducers 文件夹中的 index.js 导出了所有文件：

index.js

然后调用在以下位置创建我的商店：

Store.js

在启动时记录存储的状态会返回一个对象或列表，具体取决于我使用的减速器。当我通过 combineReducer() 运行它们时，我得到一个返回的对象，将每个减速器保持在一起。立即中断的是我在 ListItems.js 中设置的 .map 函数

控制台显示“_ListItems.map 不是函数”。我已经完成并尝试编辑 mapStateToProps 返回值，但我抓​​住了稻草。感谢您阅读本文。任何帮助绝对值得赞赏。

如何处理 React 中的权限检查？我尝试了两种方式。有没有更好的方法来处理权限检查，或者哪一种最好用？

类型 1
通过上下文传递权限。如果权限满足返回组件或 null，则权限组件从上下文中获取权限

Type 2
在mapStateToProps函数中检查权限，根据权限返回props

我有一个 Route 匹配类似的东西/roles/:id并呈现到右侧窗格中（见下文）。我用来将一些道具和动作传递到我的组件中，其中一个动作根据钩子中@connect的路由参数获取一些数据。idcomponentWillMount

我的问题是我想不出一种干净的方法来确保当用户单击右侧列表上的不同实例从而更改路线（但不是卸载/安装组件！）时，再次触发该操作.

我曾想过挂钩componentWillReceiveProps，但显然这将创建一个无限渲染循环。我在这里错过了什么吗？