问题标签 [redux]

我想为成功/错误响应显示不同的通知栏，我将两个回调传递给我的反应组件中的 redux 异步操作，如下所示：

其中 asyncAction 如下所示：

这是否被认为违反了模式？换句话说，通知栏应该根据状态变化而不是回调打开吗？

redux-form是一个非常引人注目的库，用于为 react 应用程序中的表单提供 redux 绑定，它应该非常方便。不幸的是，使用图书馆自己的例子，我没有真正绑定任何东西，这非常不方便。

我试图利用项目站点上的示例代码，并发现多个障碍，尽管试图忠实地重现它。我在哪里误解了这个 API？自编写演示代码以来，API 是否发生了变化？我是否错过了一些重要且明显的 redux 知识？

问题1：handleSubmit 方法的签名应该是handleSubmit(data)。但是 handleSubmit 目前只接收来自提交动作的 React 合成事件，没有数据。（事实上​​，使用编写的示例发送两个单独的事件，似乎是因为onSubmit表单和onClick按钮上的堆叠操作。）数据应该来自哪里，为什么我没有传递它给处理程序？

问题 2fields ：必须在表单父级上定义一个关键对象，并作为道具提供给您的表单。fields不幸的是，文档中没有解释该对象的形状，也没有真正解释它的用途。它本质上是初始的“状态”对象吗？一个简单的 redux-form 对象容器在运行时用于错误等？我已经通过将道具与fields中的字段名称匹配来停止出错connectReduxForm，但由于数据没有绑定，我假设它的形状不正确。

问题 3：这些字段应该自动绑定到 and 的处理程序onBlur，onChange以便它们适当地更新存储。那永远不会发生。（感谢 Redux 开发工具，我们可以看到这一点。但是，handleSubmit它成功地调度了initializeaction，这表明 store、reducer 和其他基本管道都在工作。）

问题 4：validateContact在初始化时触发一次，但再也不会触发。

不幸的是，这对于一个简单的 Fiddle 来说太复杂了，但是整个 repo（它只是基本的 ReduxStarterApp，加上这种形式的 POC）都可以在这里找到。

而且，这是外部组件：

以及内部表单组件：

请耐心等待，因为这个问题与我使用 React、Redux 或 react-redux 的第一个测试应用程序有关。Docs 让我走得很远，我有一个模拟银行应用程序，大部分都可以工作。我的状态对象大致如下：

我只有两个动作：

1. CHANGE_HASH（如 url 哈希）。此操作始终按预期工作，reducer 所做的只是更新 state.activePageId（是的，我正在克隆状态对象而不是修改它）。操作之后，我可以看到 Redux 存储中的状态发生了变化，我可以看到 React 已经更新。

2. ADD_TRANSACTION（表单提交）。这个动作永远不会更新 React，但它总是会更新 Redux 存储。此操作的 reducer 正在更新state.accounts[0].balance，它正在向数组state.accounts[0].transactions 添加一个事务对象。我没有收到任何错误，React 只是没有更新。但是，如果我派发CHANGE_HASH actionReact 将赶上并ADD_TRANSACTION正确显示所有状态更新。

我的减速机...

我的 mapStateToProps

我在这里想念什么？我的印象是 React 应该随着Redux store更新而更新。

Github 仓库：

部署银行演示

ps 我谎称没有任何错误。我确实有很多警告

""警告：数组或迭代器中的每个子元素都应该有一个唯一的 "key" 属性..."

我已经给他们一个键prop集到它的索引。我怀疑这与我的问题有关。

许多 redux 示例显示直接在异步操作中发出 HTTP 请求；但是，这将导致所有请求共有大量重复代码，例如：

• 根据状态码重试失败的请求
• 将通用 HTTP 标头附加到每个请求。
• 根据响应调用额外的 http 请求（即：oauth 令牌刷新）
• 在路由转换中中止正在进行的请求。

我的直觉是可以使用中间件来发出 http 请求（与redux-api-middleware.store为不变性付出很小的代价？

假设我们有一个CountryPickerwhich on mount 将向服务器发送一个请求以加载国家列表然后显示它，用户可以选择一个国家，它会发送一个PICK_COUNTRY动作并相应地更新 UI。当它无法加载国家列表时，它也会显示一些有用的信息。该组件的逻辑相当完整和独立。

我们的许多页面都使用它CountryPicker，显然我们希望重用代码。

根据情况，我们有一个CountryPickerReact 组件，aCountryReducer和CountryActions。

问题是，CountryPicker当用户选择不同的国家时，我们使用的一些页面想要做更多的事情（比如根据新国家检索新数据）。

我能想到的解决方案是为 添加一个handleSelectCountry道具CountryPicker，并在用户选择一个国家/地区时使用新的国家/地区有效负载调用它。

这对我来说有点难看，反正有没有更一致的做法？提前致谢。

我正在使用 Redux(+React) 对分层结构进行操作，我有两个问题：

1. 如何在 Redux 中实现多态？
2. 如何让“动作冒泡”

我的问题表达得更准确：

1. .

我正在使用 Redux 在 React 中制作结构代码编辑器。通过结构编辑器，我的意思是我有带有节点的树结构，我的应用程序应该在 AST 而不是纯文本上运行。

这些节点可以有各种类型（因为它是编辑 CSS 文件的编辑器，这些类型例如：“规则”、“声明”、“属性”、“值”，但更重要的是它们确实有一些类型） . 所以 JS 中有一些对象具有属性type，它type决定了它的...类型；）

所以假设我有这样的节点：

我希望能够写出这样的东西：

store.dispatch({type: 'click', nodeId: 4})

点击。但我希望点击 node of typerule会产生其他效果，而不是点击 node of type property。多态性（但我希望有一个反应组件<Node />来防止代码重复）。

我知道我可以通过 switch/case 或制作我自己的子功能来实现这一点（我的意思是将操作委托给功能），但我不想重新发明轮子。我认为对多态性的支持将对许多应用程序有用，而不仅仅是我的应用程序。

那么——如何在 Redux 中实现多态性？

2.
关于动作冒泡的第二个问题。因为我得到了树结构，例如这样的：

而且我有适当的 React 组件来呈现该结构（我有基于哑函数的无状态 React 0.14 组件，所以我不认为组件的代码现在非常重要）。无论如何，我得到<Node/>了代表单个 AST 节点的组件。

我希望该用户可以单击例如 id=3 ( {type: 'property', name: 'display', id: 3},) 处的节点，并且操作会自动“冒泡”到节点的父节点（在本例中为 id=2 的声明节点和 id=1 的规则节点）。

据我所知，Redux 中没有“动作冒泡”。也许应该是？或者也许我想实现的目标可以通过其他方式实现？（通过“动作冒泡”，我的意思是类似于浏览器中 JavaScript 事件中的“事件冒泡”，只是我想redux actions冒泡，我不希望 DOM 事件冒泡（这完全是另一回事）。我想减少动作冒泡。当我写“冒泡”时，我关注的是整体设计模式而不是实现。

这是我的两个问题:)

我对 redux 的真实示例有几个问题。

1. 与直接使用 dispatch 进行 ajax 调用的异步示例不同，实际示例使用中间件来处理此问题。在 react 应用程序中使用 redux 时推荐哪种方法？为什么？

   我的猜测是中间件是可重用的，所以如果需要进行多个ajax调用，只要传入不同的api路径作为参数，一个通用的ajax调用中间件就足够了。但是同样的事情也可以用 dispatch 说...

2. 中间件什么时候执行？通过查看源代码和阅读文档，我的理解是：dispatch an action -> all middlewares get executed , ajax calls can be made here and the returned json data can be put inside the action object and pass it onto the reducers-> reducers get executed. 我对么？

我有一个简单的redux样板项目，当我导入顶级（智能）组件时，与内联类声明相比，我遇到了不同的行为。

创建类不会导致错误，但是当我将类提取到单独的文件时，我收到以下错误：

我已经尝试内联整个文件并且错误消失了

这是项目回购（它的超级条纹背）。

Redux 提倡使用单一状态的单一存储。但是，使用 react-router 您可以获得多个页面，每个页面都有自己的顶级根组件。

应该如何使用具有多个页面的 react-router 应用程序来连接 redux？React-router 1.0 不再允许您将 props 传递给路由，因此使路由器成为包含所有页面状态的顶级组件不再可能，也不可行。

鉴于您有一些全局视图（例如，显示加载屏幕），您可能希望在许多情况下发生这种情况，是否更适合为该行为创建一个动作创建者/动作对，或者为相关动作创建一个 reducer处理过渡？

这很难简洁地描述，为了说明我的意思，这里有几个例子。哪个更好？为什么？

一个

乙

我更喜欢 A，因为在一个地方描述这些行为而不是重复状态管理的逻辑对我来说似乎更明智，但是我在 redux 社区听到了一句格言，即动作应该描述发生或正在发生的事情，而不是必须的命令。在这种情况下，这只是一个语义问题，其中“ASYNC_OPERATION_START”之类的术语比“SHOW_LOADING”更好吗？