Questions tagged «redux»

Redux是基于Flux设计模式的JavaScript应用程序的可预测状态容器。

8
为什么通过Facebook Flux使用Redux?[关闭]
已关闭。这个问题是基于观点的。它当前不接受答案。 去年关闭。 已锁定。该问题及其答案被锁定,因为该问题是题外话,但具有历史意义。它目前不接受新的答案或互动。 我已经阅读了这个答案,减少了样板,看了几个GitHub示例,甚至尝试了一点redux(待办事项应用程序)。 据我了解,官方的redux doc动机与传统的MVC架构相比具有优势。但是它没有提供以下问题的答案: 为什么要通过Facebook Flux使用Redux? 这仅仅是编程风格的一个问题:功能性还是非功能性?还是问题出在redux方法之后的abilities / dev-tools中?也许缩放?还是测试? 如果我说redux对于来自函数式语言的人来说是一种变化,那我是对的吗? 为了回答这个问题,您可以比较实现Redux在通量和Redux上的动机点的复杂性。 以下是来自官方redux doc动机的动机点: 处理乐观更新(据我了解,这几乎不依赖于第5点。很难在Facebook流量中实现它吗?) 在服务器上渲染(facebook流量也可以做到这一点。与redux相比有什么好处吗?) 在执行路线转换之前获取数据(为什么不能在facebook流量中实现?有什么好处?) 热重载(React Hot Reload可能实现。为什么需要redux?) 撤消/重做功能 还有其他要点吗?像坚持状态...

12
如何使用超时调度Redux操作?
我有一个操作可以更新我的应用程序的通知状态。通常,此通知将是错误或某种信息。然后,我需要在5秒钟后调度另一项操作,该操作会将通知状态恢复为初始状态,因此没有通知。其背后的主要原因是提供了5秒钟后通知自动消失的功能。 我在使用setTimeout并返回其他动作方面没有运气,也找不到在线完成此操作的方法。因此,欢迎提出任何建议。

10
为什么在Redux中我们需要中间件来实现异步流?
根据文档,“没有中间件,Redux存储仅支持同步数据流”。我不明白为什么会这样。为什么容器组件不能调用异步API,然后再调用dispatch操作? 例如,想象一个简单的UI:一个字段和一个按钮。当用户按下按钮时,该字段将填充来自远程服务器的数据。 import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = new Promise((resolve) => { setTimeout(() => { resolve(Math.floor(Math.random() * 100)); }, …

9
在ES6生成器上使用redux-saga与在ES2017 async / await中使用redux-thunk的优缺点
现在有很多关于redux镇上最新的孩子redux-saga / redux-saga的讨论。它使用生成器功能来侦听/调度动作。 在开始思考之前,我想知道使用优缺点的方法,redux-saga而不是下面使用redux-thunk异步/等待方法的方法。 组件可能看起来像这样,像往常一样调度动作。 import { login } from 'redux/auth'; class LoginForm extends Component { onClick(e) { e.preventDefault(); const { user, pass } = this.refs; this.props.dispatch(login(user.value, pass.value)); } render() { return (<div> <input type="text" ref="user" /> <input type="password" ref="pass" /> <button onClick={::this.onClick}>Sign In</button> </div>); } } export default connect((state) …

30
如何重置Redux存储的状态?
我正在使用Redux进行状态管理。 如何将商店重置为初始状态? 例如,假设我有两个用户帐户(u1和u2)。 想象以下事件序列: 用户u1登录到应用程序并执行某项操作,因此我们在商店中缓存了一些数据。 用户u1注销。 用户u2无需刷新浏览器即可登录应用程序。 此时,缓存的数据将与关联u1,我想对其进行清理。 当第一个用户注销时,如何将Redux存储重置为其初始状态?

6
什么是mapDispatchToProps?
我正在阅读Redux库的文档,其中包含以下示例: 除了读取状态之外,容器组件还可以调度动作。以类似的方式,您可以定义一个名为的函数mapDispatchToProps(),该函数接收dispatch()方法并返回要注入到演示组件中的回调道具。 这实际上是没有意义的。为什么现在mapDispatchToProps已经有需要mapStateToProps? 他们还提供了以下方便的代码示例: const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 有人可以用外行的术语解释一下这个功能是什么以及为什么有用吗?

7
在动作创建者中访问Redux状态?
说我有以下几点: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, } } 在该动作创建者中,我想访问全局商店状态(所有reducer)。这样做更好吗? import store from '../store'; export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, items: store.getState().otherReducer.items, } } 或这个: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return (dispatch, …
296 javascript  redux 

7
使用Redux而不是Flux会有什么弊端[关闭]
已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗?更新问题,以便通过编辑此帖子以事实和引文回答。 去年关闭。 改善这个问题 我最近才发现Redux。一切看起来不错。在Redux上使用Redux是否有任何弊端,陷阱或妥协?谢谢

5
如何在Redux中显示执行异步操作的模式对话框?
我正在构建一个需要在某些情况下显示确认对话框的应用。 假设我想删除一些东西,然后我将调度一个类似的操作,deleteSomething(id)以便某些化简器会捕获该事件并填充对话框化简器以显示它。 我的疑问是当该对话框提交时。 该组件如何根据分派的第一个动作分派适当的动作? 动作创建者应该处理这种逻辑吗? 我们可以在减速器中添加动作吗? 编辑: 使其更清楚: deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) 所以我试图重用对话框组件。显示/隐藏对话框不是问题,因为这可以在化简器中轻松完成。我要指定的是如何根据从左侧开始流动的动作从右侧调度动作。

2
Redux @connect装饰器中的“ @”(符号处)是什么?
我正在用React学习Redux,偶然发现了这段代码。我不确定它是否特定于Redux,但在其中一个示例中我看到了以下代码片段。 @connect((state) => { return { key: state.a.b }; }) 虽然的功能connect非常简单明了,但是我@以前并不了解connect。如果我没有记错的话,它甚至都不是JavaScript运算符。 有人可以解释一下这是什么,为什么使用它? 更新: 实际上,react-redux它的一部分用于将React组件连接到Redux存储。

6
Redux-多家商店,为什么不呢?
注意:我已经阅读了Redux(Baobab,也是如此)的文档,并且做了很多Google搜索和测试工作。 为什么强烈建议Redux应用程序只有一个商店? 我了解单商店设置与多商店设置的优缺点(关于此主题,有很多关于SO的问答)。 IMO,这个架构决定是基于应用程序开发人员的项目需求。那么,为什么如此强烈地建议Redux使用,几乎达到强制性的程度(尽管没有什么阻止我们开设多个商店)? 编辑:转换为单店后的反馈 在与redux一起工作了几个月后,许多人认为它是复杂的SPA,我可以说单一的商店结构让我感到很高兴。 以下几点可能会帮助其他人理解为什么在许多很多用例中,单商店还是多商店是一个有争议的问题: 可靠:我们使用选择器来挖掘应用程序状态并获取与上下文相关的信息。我们知道所有需要的数据都在一个存储中。它避免了所有关于国家问题可能在哪里的质疑。 速度很快:我们的商店目前有将近100个减速器,如果没有更多的话。即使达到这个数量,也只有极少数的减速器在任何给定的调度上处理数据,其他的只是还原以前的状态。关于大型/复杂存储(reducers的nbr)缓慢的说法几乎没有意义。至少我们还没有看到任何性能问题。 调试友好:虽然这是整体上使用redux的最有说服力的参数,但对于单商店还是多商店也是如此。在构建应用程序时,您一定会在过程中出现状态错误(程序员错误),这很正常。PITA是那些错误需要数小时才能调试的时候。多亏了单一存储(和redux-logger),我们从未在任何给定的状态问题上花费超过几分钟的时间。 一些指针 建立您的redux商店的真正挑战是决定如何构建它。首先,因为改变结构只是一个主要的痛苦。其次,因为它在很大程度上决定了您的使用方式,并为任何过程查询应用数据。关于如何构建商店有很多建议。在我们的案例中,我们发现以下是理想的: { apis: { // data from various services api1: {}, api2: {}, ... }, components: {} // UI state data for each widget, component, you name it session: {} // session-specific information } 希望此反馈对其他人有帮助。 编辑2-有用的商店工具 对于那些一直想知道如何“轻松”管理一家商店的人来说,这可能会很快变得复杂。有一些工具可以帮助隔离商店的结构依赖性/逻辑。 有Normalizr可以根据架构对数据进行标准化。然后,它提供了一个界面来处理您的数据,并通过来获取数据的其他部分id,就像一个Dictionary。 当时我还不了解Normalizr,所以我沿相同的思路建立了一些东西。Relational-json采用一个模式,并返回一个基于Table的接口(有点像一个数据库)。Relational-json的优点是您的数据结构可以动态引用数据的其他部分(本质上,您可以像正常的JS对象一样在任何方向上遍历数据)。它不如Normalizr成熟,但是我已经在生产中成功使用了几个月。
220 javascript  redux 

7
了解React-Redux和mapStateToProps()
我正在尝试了解react-redux的connect方法及其作为参数的功能。特别是mapStateToProps()。 以我的理解,其返回值mapStateToProps将是一个从状态派生的对象(因为它存在于商店中),其键将作为道具传递给目标组件(应用了connect的组件)。 这意味着目标组件所消耗的状态与存储在商店中的状态可能具有截然不同的结构。 问:可以吗? 问:这是预期的吗? 问:这是反模式吗?

4
何时使用基于ES6类的React组件和功能性ES6 React组件?
在花了一些时间学习React之后,我了解了创建组件的两个主要范例之间的区别。 我的问题是,什么时候应该使用哪个?为什么?一个人相对于另一个人的利益/取舍是什么? ES6课程: import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } 功能性: const MyComponent = (props) => { return ( <div></div> ); } 我正在考虑什么时候只要该组件没有状态要操作就可以了,是吗? 我在猜测是否使用任何生命周期方法,最好是使用基于类的组件。

4
我可以派遣一个减速器中的动作吗?
是否可以在减速器本身中调度动作?我有一个进度栏和一个音频元素。目的是在音频元素中的时间更新时更新进度条。但是我不知道在哪里放置ontimeupdate事件处理程序,或者如何在ontimeupdate的回调中分派动作来更新进度条。这是我的代码: //reducer const initialState = { audioElement: new AudioElement('test.mp3'), progress: 0.0 } initialState.audioElement.audio.ontimeupdate = () => { console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); //how to dispatch 'SET_PROGRESS_VALUE' now? }; const audio = (state=initialState, action) => { switch(action.type){ case 'SET_PROGRESS_VALUE': return Object.assign({}, state, {progress: action.progress}); default: return state; } } export default audio;
195 reactjs  redux  reducers 

9
在React组件之外访问Redux存储的最佳方法是什么?
@connect当我尝试在React组件中访问商店时,它的工作效果很好。但是我应该如何通过其他一些代码来访问它。例如:假设我想使用授权令牌创建可以在我的应用程序中全局使用的axios实例,那么实现这一目标的最佳方法是什么? 这是我的 api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api 现在我想从我的商店访问一个数据点,这是如果我尝试使用以下方法在react组件中获取数据点的情况: @connect // connect to store @connect((store) => { return { auth: store.auth } }) export default …

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.