Questions tagged «redux»

我正在研究中等复杂性的一种前端应用程序。目前，它是用纯JavaScript编写的，它具有许多不同的基于事件的消息，这些消息连接了该应用程序的几个主要部分。 我们决定需要在进一步重构的范围内为此应用程序实现某种状态容器。以前，我在redux和ngrx存储方面有一些经验（实际上遵循相同的原理）。 Redux是我们的一种选择，但是其中一位开发人员建议使用基于状态机的库，尤其是xstate库。 我从未使用过xstate，因此我发现它很有趣，并开始阅读文档并查看不同的示例。看起来很有前途且功能强大，但在某些时候我了解到它与redux之间没有任何明显的区别。 我花了几个小时试图找到答案，或者比较xstate和redux的任何其他信息。我没有找到任何明确的信息，除了像一些文章“从终极版获得一个状态机”，或链接库集中于使用终极版和XSTATE在一起（很奇怪）。 如果有人可以描述差异或告诉我开发人员何时应该选择xstate，欢迎您。

85 javascript  redux  state-machine  xstate 

在React中，状态不会立即更新，因此我们可以在中使用回调setState(state, callback)。但是在Redux中如何做呢？ 调用之后this.props.dispatch(updateState(key, value))，我需要立即对更新后的状态进行处理。 有什么方法可以像我在React中那样以最新状态调用回调？

85 javascript  reactjs  redux 

我从服务器获得令牌身份验证，因此在最初加载我的Redux应用程序时，我需要向该服务器发出请求，以检查用户是否已通过身份验证，如果是，我应该获得令牌。 我发现不建议使用Redux核心INIT操作，因此如何在呈现应用程序之前调度操作？

85 reactjs  redux 

所以我一周前开始学习React，我不可避免地遇到了状态问题以及组件应该如何与应用程序的其余部分进行通信。我四处搜寻，Redux似乎是本月的风土人情。我通读了所有文档，我认为这实际上是一个非常革命性的想法。这是我的想法： 人们普遍认为状态是非常邪恶的，并且是编程中大量错误的来源。Redux并未将所有内容分散在整个应用程序中，而是为什么不将所有内容都集中在必须发出更改操作的全局状态树中？听起来不错。所有程序都需要状态，因此让我们将其停留在一个不纯净的空间中，并仅在该空间内对其进行修改，以便轻松查找错误。然后，我们还可以声明性地将各个状态块绑定到React组件，并使它们自动重绘，并且一切都很好。 但是，我对整个设计有两个问题。首先，为什么状态树需要不可变？说我不在乎时间旅行调试，热重装，并且已经在我的应用程序中实现了撤消/重做。要做这件事似乎很麻烦： case COMPLETE_TODO: return [ ...state.slice(0, action.index), Object.assign({}, state[action.index], { completed: true }), ...state.slice(action.index + 1) ]; 代替这个： case COMPLETE_TODO: state[action.index].completed = true; 更不用说我正在制作一个在线白板以学习，每个状态更改都可能像在命令列表中添加笔刷一样简单。一段时间后（数百个笔触），复制整个阵列可能开始变得非常昂贵和费时。 我可以接受一个全局状态树，该状态树与通过操作进行更改的UI无关，但是它真的需要不可变吗？像这样的简单实现有什么问题（草稿很粗。写在1分钟内）？ var store = { items: [] }; export function getState() { return store; } export function addTodo(text) { store.items.push({ "text": text, "completed", false}); …

84 javascript  reactjs  state  immutability  redux 

我只是做一个简单的应用程序来学习与redux异步。我已使所有工作正常进行，现在我只想在网页上显示实际状态。现在，我实际上如何在render方法中访问商店的状态？ 这是我的代码（所有内容都在一页中，因为我只是在学习）： const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { …

83 javascript  asynchronous  reactjs  redux  react-redux 

我有一个在React Native Navigator组件中创建的react-redux容器组件。我希望能够将导航器作为道具传递给此容器组件，以便在其演示组件中按下按钮之后，它可以将一个对象推入导航器堆栈。 我想这样做而无需手写react-redux容器组件给我的所有样板代码（并且也不要错过react-redux也会给我的所有优化）。 容器组件代码示例： const mapStateToProps = (state) => { return { prop1: state.prop1, prop2: state.prop2 } } const mapDispatchToProps = (dispatch) => { return { onSearchPressed: (e) => { dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator } } } const SearchViewContainer = connect( …

82 reactjs  react-native  redux  react-redux 

这是Redux官方文档的一部分： 之所以称为简化器，是因为它是传递给函数的类型 Array.prototype.reduce(reducer, ?initialValue) 这对我来说没有多大意义。有人可以向我解释为什么它们实际上称为减速器吗？它们返回默认值（或具有默认参数值）的事实并不会使它们归约。

82 javascript  redux 

我正在尝试启动刚从GitHub存储库克隆的Redux应用程序。 我尝试使用以下命令运行它 npm start 我收到此错误 > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed …

81 javascript  reactjs  npm  redux  react-redux 

我有一个带有搜索面板的网页。搜索面板有几个输入字段：id，size，... 我想要的是用户设置搜索值（例如：id = 123和size = 45）并按下搜索按钮时： Redux reducer中的searchState应该使用新的搜索值（id = 123和size = 45）进行更新 网址应更改为“ http：// mydomain / home？id = 123＆size = 45 ” 另一方面，如果用户将URL更改为http：// mydomain / home？id = 111＆size = 22，则： reducer中的searchState应该使用新的搜索值（id = 111和size = 22）进行更改 UI搜索面板输入应更新为新值（id = 111和size = 22） 如何达成目标？我应该使用什么路由器（react-router，redux-router，react-router-redux或其他）？

77 react-router  redux  react-redux  redux-framework  react-router-redux 

我们提供了讲座和章节的列表，用户可以在其中选择和取消选择它们。这两个列表存储在redux存储中。现在，我们希望在url的hash标签中保留选定的演讲段和章节段的表示形式，并且对该URL所做的任何更改也应更改存储（双向同步）。 使用react-router甚至react-router-redux的最佳解决方案是什么？ 我们真的找不到一些很好的示例，其中react路由器仅用于维护url的hash标签，并且仅更新一个组件。

76 javascript  reactjs  react-router  redux  react-router-redux 

我目前正在尝试概念化如何在另一个组件中进行分派之后根据数据更改来处理一个组件中的动作。 采取这种情况： dispatch(someAjax) ->状态更新中的属性。 之后，我需要另一个依赖于此相同属性的组件来知道已更新该组件，并根据新值调度一个动作。 除了使用某种类型的value.on(change...解决方案之外，处理此类动作“级联”的首选方法是什么？

76 reactjs  redux  redux-thunk 

我目前正在学习React，并且试图弄清楚如何与Redux一起使用它来构建移动应用程序。我对两者如何关联/一起使用感到困惑。例如，我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程，但是现在我想尝试在该应用中添加一些reduces / action，我不确定这些内容将与我已经完成的工作联系在一起。

76 javascript  mobile  reactjs  redux  reducers 

我有以下组件会no-shadow在上触发ESlint错误FilterButton props。 import { setFilter } from '../actions/filter'; function FilterButton({ setFilter }) { return ( <button onClick={setFilter}>Click</button> ); } export default connect(null, { setFilter })(FilterButton); 如何在保持简洁语法mapDispatchToProps和ESlint规则的同时避免警告？ 我知道我可以添加注释以禁止显示警告，但是对每个组件执行此操作似乎都是多余且乏味的。

76 javascript  reactjs  redux  eslint  react-redux 

我有一家商店，上面有物品清单。当我的应用程序首次加载时，我需要对项目进行反序列化，就像在基于项目创建一些内存中对象一样。这些项目存储在我的redux存储中，并由处理itemsReducer。 我正在尝试使用redux-saga处理反序列化，这是副作用。在首页加载时，我调度了一个操作： dispatch( deserializeItems() ); 我的传奇故事设置简单： function* deserialize( action ) { // How to getState here?? yield put({ type: 'DESERISLIZE_COMPLETE' }); } function* mySaga() { yield* takeEvery( 'DESERIALIZE', deserialize ); } 在我的反序列化传奇中，我要处理创建商品的内存版本的副作用，我需要从商店中读取现有数据。我不确定在这里怎么做，或者这是否是我甚至应该尝试使用redux-saga的模式。

75 javascript  reactjs  redux  redux-saga 

我正在使用React + Flux。我们的团队计划从助焊剂转变为还原剂。Redux对来自助焊剂世界的我非常困惑。在磁通控制中，从组件->操作->存储和存储更新返回组件很简单。它很简单，也很清楚。 但是在redux中令人困惑。这里没有商店，是的，有些例子没有使用商店。我经历了一些教程，看来每个人都有自己的实现风格。有些正在使用容器，有些则没有。（我不知道这个Containers概念，也无法理解mapStateToProps，mapDispatchToProps的作用）。 有人可以清楚地说明redux中的控制流是如何发生的吗？ redux中的组件/容器/动作/动作创建者/商店的作用是什么？ redux / react-redux / redux-thunk /其他之间的区别?? 如果您可以发布任何简单而精确的redux教程的链接，这将非常有帮助。

73 javascript  reactjs  redux  reactjs-flux  react-redux