Tag: redux

这是使用redux删除项目的正确方法吗?

我知道我不应该改变input,应该克隆对象来改变它。 我正在遵循一个使用了redux启动器项目的惯例: ADD_ITEM: (state, action) => ({ …state, items: […state.items, action.payload.value], lastUpdated: action.payload.date }) 添加一个项目 – 我得到使用传播追加数组中的项目。 删除我用过的: DELETE_ITEM: (state, action) => ({ …state, items: […state.items.splice(0, action.payload), …state.items.splice(1)], lastUpdated: Date.now() }) 但是这是突变的input状态对象 – 这是禁止的,即使我正在返回一个新的对象?

如何构buildRedux组件/容器

我正在使用REDX,我不知道如何组织我的组件,我认为最好的方法是将它们保存在主文件夹名称和文件夹名称以及所有内部组件的文件夹中: 组件 常见的东西,如链接,标题标题等 表格/button,input等 玩家/所有小组件组成玩家 index.js这个是顶层布局组件 playBtn.js artistName.js songName.js 插曲/另一个组件 然后,在容器文件夹中,每页有一个容器,这是我实际连接到Redux的唯一容器: 集装箱/ HomePageApp.js EpisodePageApp.js … 然后这些操作是每个顶级组件一个,而不是每个页面一个,所以在连接到Redux的页面容器中,我传递了该页面中使用的组件的所有操作。 例如: 动作/ Player.js Episode.js … 我做对了吗? 我没有find关于它的谷歌search的很多信息,我发现我认为他们只限于小项目。 谢谢!

在摩卡testing中使用webpack别名

我正在React / Redux / Webpack中开发一个Web应用程序,现在我正在开始与Mocha集成testing。 我按照在Redux文档中编写testing的说明进行操作 ,但是现在我遇到了一个与我的webpack别名有关的问题。 例如,看看我的一个动作创build者的testing的import部分: import expect from 'expect' // resolves without an issue import * as actions from 'actions/app'; // can't resolve this alias import * as types from 'constants/actionTypes'; // can't resolve this alias describe('Actions', () => { describe('app',() => { it('should create an action with a successful connection', () […]

如何获取新数据以响应React路由器使用Redux进行更改?

我正在使用Redux,redux-router和reactjs。 我试图做一个应用程序,我获取路线变化的信息,所以,我有这样的: <Route path="/" component={App}> <Route path="artist" component={ArtistApp} /> <Route path="artist/:artistId" component={ArtistApp} /> </Route> 当有人进入artist/<artistId>我想search艺术家,然后呈现信息。 问题是,这样做的最好方法是什么? 我已经find了一些答案,使用RxJS或尝试一个中间件来pipe理请求。 现在,我的问题是,这是真正必要还是只是一种方法来保持体系结构的反应不可知论? 我可以直接从反应componentDidMount()和componentDidUpdate()获取我需要的信息吗? 现在我正在通过触发这些函数中的请求信息的操作来执行此操作,并且在信息到达时重新呈现组件。 该组件有一些让我知道的属性: { isFetching: true, entity : {} } 谢谢!

Redux:如何做后端持久性的意见/例子?

我想知道如何使用Redux的人正在接近他们的后端持久性。 特别是,您是将“操作”存储在数据库中,还是只存储应用程序的最后一个已知状态? 如果您正在存储这些操作,那么您是从服务器请求它们,然后在给定页面加载时重播它们? 难道这不会导致一些性能问题与大规模的应用程序,有很多的行动? 如果你仅仅是存储“当前状态”,那么在客户的行为发生的情况下,你是如何坚持这个状态的? 有没有人有一些代码的例子,他们如何将redux减速器连接到后端存储apis? 我知道这是一个非常“取决于你的应用程序”types的问题,但是我只是在思考这里的一些想法,试图感受一下这种“无状态”架构如何在全栈意义上工作。 感谢大家。

如何为具有列表/详细信息视图和分页的应用程序selectRedux状态形状?

想象一下,我的数据库中有很多条目(比如用户)。 我也有两条路线,一条是列表,另一条是细节(在哪里可以编辑条目)。 现在我正在努力如何处理数据结构。 我正在考虑两种方法,两种方法的组合。 共享数据集 我导航到/list ,我所有的用户都是从api下载的,存储在redux存储中,在关键users ,我还添加了一些users_offset和users_limit来只呈现列表的一部分 然后我导航到/detail/<id> ,并存储与<id>作为val …这意味着我将能够得到我的用户数据像这样users.find(res => res.id === currently_selected_user) 因为我正在处理一个数据集和指向它的详细信息,所以更新也会很好,也很容易 添加一个新的用户也很容易,再次只是与相同的用户列表 现在我使用这种方法的问题是,当用户列表变得很大(比如数百万)时,下载可能需要一段时间。 而且,当我直接导航到/detail/<id> ,我还没有下载所有的用户,所以要获取我需要的数据,我必须先下载整个数据。 数百万用户只需编辑一个。 分离的数据集 我导航到/list ,而不是从api下载所有的用户,我只下载其中的几个,这取决于我的users_per_page和users_current_page将被设置为,我可能将数据存储为users_currently_visible 然后导航到/detail/<id> ,将/detail/<id>存储为users_currently_visible作为val …,而不是通过users_currently_visible进行search,只需从api下载用户的数据。 在更新,我不会以任何方式更新users_currently_visible 我也不会加上 我所看到的可能的问题是我必须在访问/list再次从api下载数据,因为它可能与数据库中的数据不同步,我也可能不必要地下载用户数据,因为他们可能已经在我的users_currently_visible 某种frankenstein-y shenanigans 我详细说明,我在分离的数据集中做同样的事情,但不是直接从api下载用户的数据,我首先检查: 我有任何users_currently_visible 如果是这样,有一个用户与我之间的身份证? 如果两者都是真实的,那么我将其用作我的用户数据,否则我会进行api调用 同样发生在更新,我检查如果我的用户存在users_currently_visible如果是这样,我也更新该列表,如果不是我什么都不做 这可能会起作用,但并不真的觉得这是正确的方式。 我也可能还需要下载访问/list users_currently_visible新鲜/list ,因为我可能已经添加了一个新的.. 是否有任何粉丝喜欢这样做的方式?我敢肯定,每个用户都必须遇到同样的事情。 谢谢!

redux-thunk和redux-promise有什么区别?

据我所知,纠正我,如果我错了, redux-thunk是一个中间件,它可以帮助我们在动作本身调度asynchronous函数和debugging值,而当我使用了redux-promise时,我不能创buildasynchronous函数,而不实现我自己的机制作为Action引发只调度普通对象的exception。 这两个软件包的主要区别是什么? 在单个页面反应应用程序中使用这两个软件包还是有一些好处,或者坚持使用redux-thunk就足够了?

我应该何时将Redux添加到React应用程序?

我目前正在学习React,并且正在尝试弄清楚如何使用Redux来构build移动应用程序。 我对这两者如何相关/可用在一起感到困惑。 例如,我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了这个教程,但是现在我想要在该应用程序中添加一些reducer / actions,我不确定那些将与我已经完成的事情配合。

React-Redux:所有组件状态应该保存在Redux Store中

说我有一个简单的切换: 当我点击button,颜色组件在红色和蓝色之间变化 我可以通过做这样的事情来达到这个目的。 index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} 但这是一个很多的代码写的地狱,我可以在5秒内用jQuery,一些类和一些CSS来实现… 所以我想我真正要问的是,我在这里做错了什么?

在反应堆中处理读取错误的最好方法是什么?

我有一个客户端的减速器,另一个为AppToolbar和其他一些… 现在让我们说,我创build了一个获取操作来删除客户端,如果失败,我的代码在客户端reducer应该做一些东西,但我也想在AppToolbar中显示一些全局错误。 但客户端和AppToolbar减速器不共享状态的相同部分,我不能在减速器中创build新的操作。 那么我怎么想显示全局错误呢? 谢谢 更新1: 我忘了提及我使用este devstack 更新2:我标记了埃里克的答案是正确的,但我不得不说,我在este中使用的解决scheme更像埃里克和丹的答案的组合…你只需要find什么适合你在你的代码中最好的.. 。