[英]react redux how to trigger container function with action coming from non react component
I have a modal for login dialog that is triggered by clicking a non-react component. 我有一个通过单击非反应组件触发的登录对话框的模式。
I managed to dispatch the action and update the state when the non-react component is clicked, so the information is available on props, but I need to trigger a function that updates CSS and such, and that I could not do inside the container. 当单击非反应组件时,我设法调度了动作并更新了状态,因此该信息在props上可用,但是我需要触发一个更新CSS之类的函数,并且无法在容器内进行操作。
That would be trivial if the action was coming from the container or its children. 如果操作是来自容器或其子级的,那将是微不足道的。
So, on the app.js code below, I am trying to trigger the method onLoginClick() whenever the SHOW_LOGIN action is dispatched. 因此,在下面的app.js代码上,无论何时调度SHOW_LOGIN操作,我都尝试触发onLoginClick()方法。
Also, this.state.message should be updated with the payload of SHOW_LOGIN on that same onLoginClick() method. 另外,应该使用同一onLoginClick()方法上的SHOW_LOGIN的有效负载来更新this.state.message。
Redux's store.subscriber() method is triggered on changes to state, but I could not find out how to make it work in this situation. Redux的store.subscriber()方法是在状态更改时触发的,但是我找不到在这种情况下如何使它工作的方法。
First, it is only available on the upstream component and then I still cannot trigger the onLoginClick() method from store.subscriber. 首先,它仅在上游组件上可用,然后我仍然无法从store.subscriber触发onLoginClick()方法。
Thanks 谢谢
non-react element utils.js 非反应性元素utils.js
`//react files to enable #signin_button to activate popup
import { dispatch } from 'redux';
import { showLogin } from '../../client/login/actions/';
import { store } from '../../client/login/';
$("#signin_button").click(function(e) {
store.dispatch(showLogin());
.......`
/login/actions/index.js /login/actions/index.js
export const SHOW_LOGIN = 'SHOW_LOGIN';
export function showLogin(){
return {
type: SHOW_LOGIN,
payload: 'some text'
}
}
/login/reducers/reducer_login.js /login/reducers/reducer_login.js
import { SHOW_LOGIN } from '../actions/index';
export default function (state = [], action){
switch (action.type) {
case SHOW_LOGIN:
return [ ...state, action.payload ];
}
return state;
}
/login/reducers/index.js /login/reducers/index.js
import { combineReducers } from 'redux';
import LoginReducer from './reducer_login';
import RecoveryReducer from './reducer_recovery';
import SubmitRecoveryReducer from './reducer_submit_recovery';
const rootReducer = combineReducers({
login: LoginReducer,
recovery: RecoveryReducer,
submit_recover: SubmitRecoveryReducer
});
export default rootReducer;
/login/containers/app.js /login/containers/app.js
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { showLogin, showRecovery, submitRecovery } from '../actions/index';
import Recovery from './recovery';
import SocialLogin from './social_login';
class LoginPopup extends React.Component{
constructor(props){
super(props);
this.state = {
error : false,
emailRecovery: '',
message: 'some message'
};
this.recovery = this.recovery.bind(this);
this.onRecoveryChange = this.onRecoveryChange.bind(this);
this.onSubmitRecovery = this.onSubmitRecovery.bind(this);
}
recovery() {
//handles showing recovery password dialog
}
onRecoveryChange(event){
this.setState({emailRecovery: event.target.value});
}
onSubmitRecovery(event){
//handles recovery password request
}
onLoginClick(){
//*** handles CSS and other when non-react component clicked ***
}
render(){
console.log(this.props.login);
return (
<div id="popup_sign" style={{display:'none'}} >
<h4 className="account_notice">
{this.state.message}
</h4>
<div id="login">
<SocialLogin error={this.state.error} recovery={this.recovery}/>
<button id="ok_login" className="sub_ok btn btn-sm" type="button" >OK</button>
</div>
<Recovery
submitRecovery={this.onSubmitRecovery}
email={this.state.emailRecovery}
emailChange={this.onRecoveryChange} />
</div>
)
}
const mapStateToProps = (state) => {
return {
login: state.login,
recovery: state.recovery,
submit_recover: state.submit_recover
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({ showLogin,showRecovery,submitRecovery }, dispatch);
}
componentWillReceiveProps(nextProps) {
this.onLoginClick(nextProps);
}
onLoginClick (nextProps) {
if (nextProps.login.length > this.props.login.length) {
this.setState({message: nextProps.login});
$("#popup_sign").show();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.