我正在尝试将socketCluster与简单的redux应用程序集成。目前,只有一个功能可以获取组件中当前状态的值,并通过中间件将其发送到服务器。
这是我的actions.js文件
gcc -I/usr/local/include/ -L/usr/local/lib -o john john.c -linfluxdb
我的减速机:
export function signupRequest(creds){
return{
type: SIGNUP_REQUEST,
isFetching: true,
isAuthenticated: false,
creds
}
}
我有一个中间件功能,负责向服务器发送输入
middleware.js
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
})
}
我的客户端index.js文件
export default socket => store => next => action => {
socket.emit('action',action);
}
我的App.jsx容器:
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
)
我的注册组件:
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);
我面临的问题是中间件/操作在输入中的每个按键上被触发。我想仅在Click事件按钮上调用中间件。
这是我在服务器端获得的输出
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' }
答案 0 :(得分:2)
原来问题出现在onClick事件上 - 我将onClick事件转换为如下函数:
<button onClick= {() => this.props.signupRequest(this.state.name)} >
Signup
</button>
反对
<button onClick= {this.props.signupRequest(this.state.name)} >
Signup
</button>