状态更改时会不必要地触发Redux操作
Redux actions get triggered unnecessarily on state change
我正在尝试将socketCluster与一个简单的redux应用程序集成。目前,只有一个特性可以获取组件中当前状态的值,并通过中间件将其发送到服务器。
这是我的actions.js文件
export function signupRequest(creds){
return{
type: SIGNUP_REQUEST,
isFetching: true,
isAuthenticated: false,
creds
}
}
我的减速器:
function signUp(state={
isFetching:false,
isAuthenticated: localStorage.getItem('id_token')? true : false
},action)
{
switch(action.type){
case SIGNUP_REQUEST:
return Object.assign({},state,{
isFetching:true,
isAuthenticated: false,
user: action.creds
})
}
我有一个中间件功能,负责将输入发送到服务器
中间件.js
export default socket => store => next => action => {
socket.emit('action',action);
}
我的客户端index.js文件
const socket = connect();
const createStoreWithMiddleware = applyMiddleware(middlewares(socket))(createStore);
const store = createStoreWithMiddleware(reducer);
let rootElement = document.getElementById('root')
render(
<Provider store={store}>
<App/>
</Provider>,rootElement
)
我的App.jsx容器:
class App extends Component{
render(){
const {dispatch,isAuthenticated,errorMessage,isFetching} = this.props;
return(
<Signup
onButtonClick = {this.props.signupRequest}/>
)
}
}
function mapStateToProps(state){
const {isAuthenticated,errorMessage,isFetching} = state.signUp
return {
isAuthenticated,
errorMessage,
isFetching
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({signupRequest:signupRequest},dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
我的注册组件:
class Signup extends Component{
constructor(props){
super(props);
this.state = {name:''};
this.onInputChange = this.onInputChange.bind(this)
}
onInputChange(event){
this.setState({name:event.target.value})
}
render(){
return (
<div>
<input type="text"
ref="username"
className="SignupUsername"
placeholder="Username"
value = {this.state.name}
onChange={this.onInputChange}
/>
<button onClick= {this.props.onButtonClick(this.state.name)} >
Signup
</button>
</div>
)
}
}
export default Signup
我面临的问题是,在输入中的每个按键上,中间件/操作都会被触发。我只想在按钮单击事件上调用中间件。
这是我在服务器端上得到的输出
action recieved : { type: 'SIGNUP_REQUEST',
isFetching: true,
isAuthenticated: false,
creds: 'a' }
action recieved : { type: 'SIGNUP_REQUEST',
isFetching: true,
isAuthenticated: false,
creds: 'as' }
action recieved : { type: 'SIGNUP_REQUEST',
isFetching: true,
isAuthenticated: false,
creds: 'asd' }
action recieved : { type: 'SIGNUP_REQUEST',
isFetching: true,
isAuthenticated: false,
creds: 'asda' }
action recieved : { type: 'SIGNUP_REQUEST',
isFetching: true,
isAuthenticated: false,
creds: 'asdas' }
action recieved : { type: 'SIGNUP_REQUEST',
isFetching: true,
isAuthenticated: false,
creds: 'asdasd' }
正如您所看到的,套接字在输入中的每个按键上都发送操作单击按钮也不会调用中间件
EDIT-我尝试将注册组件转换为容器-但我似乎仍然有同样的问题
class Signup extends Component{
constructor(props){
super(props);
this.state = {name:''};
this.onInputChange = this.onInputChange.bind(this)
}
onInputChange(event){
this.setState({name:event.target.value})
}
render(){
return (
<div>
<input type="text"
ref="username"
className="SignupUsername"
placeholder="Username"
value = {this.state.name}
onChange={this.onInputChange}
/>
<button onClick= {this.props.signupRequest(this.state.name)} >
Signup
</button>
</div>
)
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({signupRequest:signupRequest},dispatch)
}
export default connect(null,mapDispatchToProps)(Signup)
原来问题出在onClick事件上-我将onClick活动转换为如下函数:
<button onClick= {() => this.props.signupRequest(this.state.name)} >
Signup
</button>
与相反
<button onClick= {this.props.signupRequest(this.state.name)} >
Signup
</button>
相关文章:
- 使用immutable.js在Redux中操作嵌套数组中的数据
- 使用react router/react router redux将特定的redux操作绑定到一个路由
- 在Redux中链接async和sync操作以计算初始状态
- Redux-正确调度操作
- Redux:为什么不把操作和reducer放在同一个文件中呢
- React+Redux-未捕获错误:操作可能没有未定义的“;类型“;所有物
- reactJs redux:如何对用户事件调度操作并将操作与化简器和存储链接
- 如果条件,则在其他操作之后调用 Redux 操作
- React/Redux 状态在第二次操作调用时为空
- 我应该如何在redux中构建/传递我的数据或操作
- React/Redux,使用Redux-Thunk实现多项操作
- 状态更改时会不必要地触发Redux操作
- Redux 操作创建者在另一个内部调用一个
- 在 Redux 操作中测试副作用
- 侦听 redux 操作
- 将文本区域值发送给redux操作创建器
- 我如何从我的API模块调度一个redux操作?
- 如何对异步Redux操作进行单元测试以模拟ajax响应
- Redux操作名称使用数字
- 如何在redux操作中处理XMLHttpRequest