Questions tagged «redux»

在“ 设计状态形状 ”一章中，文档建议将状态保留在以ID为键的对象中： 将每个实体保留在以ID作为键存储的对象中，并使用ID从其他实体或列表中引用它。 他们继续陈述 将应用程序的状态视为数据库。 我正在处理状态列表中的过滤器列表，其中一些将处于打开状态（它们显示在弹出窗口中），或者具有选定的选项。当我阅读“将应用程序的状态视为数据库的情况”时，我想到了将其视为JSON响应，因为它将从API（本身由数据库支持）返回。 所以我在想 [{ id: '1', name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, { id: '10', name: 'Time & Fees', open: false, options: ['20', '21', '22', '23', '24'], selectedOption: null, parent: '1', }] 但是，文档建议的格式更像 { 1: { name: …

94 javascript  redux  spread-syntax 

我正在React的一个项目上工作，遇到了一个让我感到困惑的问题。 每当我运行时yarn start，都会出现此错误： TypeError [ERR_INVALID_ARG_TYPE]：“路径”参数必须为字符串类型。接收类型未定义 我不知道为什么会这样，如果有人经历过，我将不胜感激。

92 javascript  reactjs  redux  visual-studio-code  yarnpkg 

据我所知并纠正我是否有错，redux-thunk是一个中间件，可以帮助我们在操作本身中调度异步函数和调试值，而当我使用redux-promise时，如果不实现自己的方法就无法创建异步函数作为Action的机制抛出仅分配纯对象的异常。 这两个软件包之间的主要区别是什么？在单个页面的React应用程序中同时使用两个软件包是否有任何好处，或者坚持redux-thunk就足够了？

92 reactjs  redux  redux-thunk  redux-promise 

我正在分解Redux的todo示例以尝试理解它。我读到它mapDispatchToProps允许您将调度动作映射为道具，因此我想到重写addTodo.js以使用mapDispatchToProps而不是调用dispatch（addTodo（））。我叫它addingTodo()。像这样： import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> <input ref={node => { input = node }} /> <button type="submit">Submit</button> …

92 javascript  reactjs  redux  react-redux 

Redux文档的第一个原理是： 整个应用程序的状态存储在单个存储中的对象树中。 我实际上以为我对所有原则都了解得很好。但是我现在很困惑应用程序的含义。 我理解，如果应用程序仅意味着网站中复杂的小部分之一并且仅用一页即可工作。但是，如果申请意味着整个网站怎么办？我应该使用LocalStorage还是Cookie或其他某种方式保留状态树？但是如果浏览器不支持LocalStorage怎么办？ 我想知道开发人员如何保留其状态树！:)

92 reactjs  redux  flux 

用于bindActionCreators的Redux文档指出： 唯一的用例bindActionCreators是，当您要将一些操作创建者传递给一个不了解Redux的组件，并且您不想将调度或Redux存储传递给该组件时。 在哪里bindActionCreators使用/需要一个示例？ 哪种组件不知道Redux？ 两种选择的优点/缺点是什么？ //actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionCreators, dispatch) } 与 function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return { someCallback: (postId, index) …

91 reactjs  redux  react-redux 

我正在使用Typescript，React和Redux（均在Electron中运行）开发一个项目，当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时，我遇到了一个问题。宽松地说，容器组件具有以下结构： class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); 和子组件： interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 显然，我只包含基础知识，这两个类还有很多其他内容，但是当我尝试运行对我来说看起来像是有效代码的代码时，仍然出现错误。我得到的确切错误： …

91 reactjs  typescript  redux  electron  jsx 

我正在尝试将表示性组件与容器组件分开。我有一个SitesTable和一个SitesTableContainer。容器负责触发redux操作，以根据当前用户获取适当的网站。 问题是在最初呈现容器组件之后，异步获取了当前用户。这意味着容器组件不知道它需要重新执行其componentDidMount函数中的代码，该代码将更新数据以发送到SitesTable。我认为当其props（user）之一更改时，我需要重新渲染容器组件。如何正确执行此操作？ class SitesTableContainer extends React.Component { static get propTypes() { return { sites: React.PropTypes.object, user: React.PropTypes.object, isManager: React.PropTypes.boolean } } componentDidMount() { if (this.props.isManager) { this.props.dispatch(actions.fetchAllSites()) } else { const currentUserId = this.props.user.get('id') this.props.dispatch(actions.fetchUsersSites(currentUserId)) } } render() { return <SitesTable sites={this.props.sites}/> } } function mapStateToProps(state) { const user = …

90 reactjs  redux  react-redux 

说我有一个简单的切换： 当我单击按钮时，颜色组件在红色和蓝色之间切换 我可以通过执行以下操作来达到此结果。 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} 但这是很多代码的地狱，我可以用jQuery，一些类和一些CSS在5秒钟内完成一些事情。 所以我想我真正要问的是，我在这里做错了什么？

89 javascript  reactjs  redux 

我通常在Stack上发布与代码相关的内容，但这更多是关于社区的一般思想的问题。 似乎有很多人主张将Redux与React结合使用来管理数据/状态，但是在阅读和学习两者的过程中，我遇到了一些看起来不太正确的事情。 Redux 在此页面底部：http : //redux.js.org/docs/basics/UsageWithReact.html（通过商店），建议您使用React“上下文”的“魔术”。 一种选择是将其作为道具传递给每个容器组件。但是，这很繁琐，因为您甚至必须通过演示组件来进行存储，因为它们恰好在组件树中渲染了一个容器。 我们建议的选项是使用特殊的React Redux组件，以神奇方式使商店可用于所有容器组件... 反应 在React Context页面（https://facebook.github.io/react/docs/context.html）上，它在顶部有一个警告： 上下文是一项先进的实验功能。该API可能会在将来的版本中更改。 然后在底部： 正如在编写清晰的代码时最好避免使用全局变量一样，在大多数情况下，您应该避免使用上下文... 不要使用上下文来通过组件传递模型数据。显式地将数据线程穿过树很容易理解... 所以... Redux建议使用React的“上下文”功能，而不是store通过“ props” 将其传递给每个组件。而React建议相反。 而且，似乎Dan Abramov（Redux的创建者）现在为Facebook（React的创建者）工作，只是让我更加困惑。 我可以阅读所有这些吗？ 当前在这个问题上的普遍共识是什么？

88 javascript  reactjs  redux 

我正在努力通过以下语法找出问题所在： export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; 我不断收到错误消息： 等待是保留字 ...但是在异步函数中不合法吗？ 调度位来自react-thunk库。

88 javascript  reactjs  async-await  redux 

我有自己的单元测试reducers。但是，当我在浏览器中调试时，我想检查我的动作是否已正确调用以及状态是否已相应修改。 我正在寻找类似的东西： window._redux.store ...在浏览器中，这样我就可以在控制台上键入该信息并检查运行情况。 我该如何实现？

88 javascript  reactjs  redux 

我可能想念一些很明显的东西，想让自己清楚。 这是我的理解。 在幼稚的react组件中，我们有states＆props。更新state时会setState重新渲染整个组件。props大多是只读的，更新它们没有任何意义。 在订阅redux商店的react组件中，通过类似于store.subscribe(render)，它每次商店更新时都会重新渲染。 react-redux具有一个帮助程序，它通常通过类似以下方式connect()注入状态树的一部分（组件感兴趣）和actionCreatorsprops组件 const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) 但是，了解到asetState对于TodoListComponent响应redux状态树更改（重新渲染）必不可少，因此在组件文件中找不到任何state或setState相关代码TodoList。它的内容如下： const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) 有人可以指出我所缺少的正确方向吗？ 附言：我遵循与redux软件包捆绑在一起的待办事项列表示例。

86 reactjs  redux  react-redux 

我有一个化简器，为了计算新状态，我需要操作中的数据以及该化简器未管理的部分状态数据。具体来说，在我将在下面显示的reducer中，我需要访问该accountDetails.stateOfResidenceId字段。 initialState.js： export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } }; FormsReducer.js： import * as types from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './initialState'; import formsHelper from '../utils/FormsHelper'; export default function formsReducer(state = initialState.forms, action) { …

86 javascript  reactjs  redux 

Redux应用程序中的初始状态可以通过两种方式设置： 将其作为第二个参数传递给createStore（docs link） 将其作为第一个参数传递给您的（子）还原器（docs链接） 如果将初始状态传递给商店，您如何从商店读取该状态并将其作为化简器中的第一个参数？

85 javascript  reactjs  redux