Questions tagged «react-redux»

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

889 javascript  redux  react-redux  timeout 

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

357 reactjs  redux  react-redux 

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

240 javascript  modal-dialog  redux  react-redux 

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

219 javascript  reactjs  redux  react-redux 

axios POST请求正在访问控制器上的url，但为我的POJO类设置了空值，当我浏览chrome中的开发人员工具时，有效负载包含数据。我究竟做错了什么？ Axios POST请求： var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 浏览器响应： 如果我将标头设置为： headers:{ Content-Type:'multipart/form-data' } 请求引发错误 发布多部分/表单数据时出错。Content-Type标头缺少边界 如果我在邮递员中发出相同的请求，则效果很好，并将值设置为POJO类。 任何人都可以解释如何设置边界或如何使用axios发送表单数据。

203 reactjs  react-redux  axios  ajaxform  axios-cookiejar-support 

@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 …

191 reactjs  redux  react-redux 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引文回答。 2年前关闭。 改善这个问题 React 16.3.0已发布，并且Context API不再是实验功能。Dan Abramov（Redux的创建者）在这里对此发表了很好的评论，但是Context仍然是实验性功能已经有两年了。 我的问题是，根据您的看法/经验，我何时应该在React Redux上使用React Context，反之亦然？

186 javascript  reactjs  redux  react-redux  react-context 

如何arr[]在reducer的redux状态数组中添加元素？我正在这样做- import {ADD_ITEM} from '../Actions/UserActions' const initialUserState = { arr:[] } export default function userState(state = initialUserState, action) { console.log(arr); switch (action.type) { case ADD_ITEM: return { ...state, arr: state.arr.push([action.newItem]) } default: return state } }

140 react-native  redux  react-redux 

我是一名javascript / redux / react初学者，使用redux，react-redux和react构建一个小型应用程序。出于某种原因，当在连接（反应-redux绑定）的同时使用mapDispatchToProps函数时，我收到一个TypeError，指示我尝试执行生成的prop时，dispatch不是函数。但是，当我将调度作为道具调用时（请参阅提供的代码中的setAddr函数），它可以工作。 我很好奇这是为什么，在redux docs的示例TODO应用程序中，mapDispatchToProps方法是以相同的方式设置的。当我在函数内部进行console.log（dispatch）时，它说dispatch是类型对象。我可以继续以这种方式使用调度，但是在继续使用redux之前，我会更好地知道为什么会这样。我正在将webpack与babel-loaders一起使用进行编译。 我的代码： import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: …

124 javascript  reactjs  redux  react-redux 

如何在saga函数中访问redux状态？ 简短答案： import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction);

121 javascript  reactjs  redux  react-redux  redux-saga 

作为React世界的初学者，我想深入了解我使用时会发生{this.props.children}什么以及使用该情况的情况。以下代码段的意义是什么？ render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }

118 javascript  reactjs  react-redux  frontend 

我看到在Redux 中传递给函数的mapStateToPropsand mapDispatchToProps函数作为第二个参数。connectownProps [mapStateToProps(state, [ownProps]): stateProps] (Function): [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 可选[ownprops]参数是什么？ 我正在寻找一个其他示例来使事情变得清晰，因为Redux文档中已经有一个

95 redux  react-redux 

我正在分解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 

用于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 

我正在尝试将表示性组件与容器组件分开。我有一个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