javascript - React Redux如何使用来自非React组件的操作触发容器功能

Question

我有一个登录对话框的模式，通过单击非 react 组件来触发。

当单击非 react 组件时，我设法分派(dispatch)操作并更新状态，因此信息在 Prop 上可用，但我需要触发一个更新 CSS 等的函数，而我无法在内部执行此操作容器。

如果操作来自容器或其子容器，那将是微不足道的。

因此，在下面的 app.js 代码中，每当调度 SHOW_LOGIN 操作时，我都会尝试触发 onLoginClick() 方法。

此外，应使用同一 onLoginClick() 方法上的 SHOW_LOGIN 有效负载更新 this.state.message。

Redux 的 store.subscriber() 方法会在状态更改时触发，但我不知道如何使其在这种情况下工作。

首先，它仅在上游组件上可用，然后我仍然无法从 store.subscriber 触发 onLoginClick() 方法。

谢谢

非 React 元素 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

export const SHOW_LOGIN = 'SHOW_LOGIN';

export function showLogin(){
  return {
    type: SHOW_LOGIN,
    payload: 'some text'
  }
}

/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

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

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);
}

Answer 1

componentWillReceiveProps(nextProps) {
  this.onLoginClick(nextProps);
}

onLoginClick (nextProps) {
    if (nextProps.login.length > this.props.login.length) {
        this.setState({message: nextProps.login});
        $("#popup_sign").show();
}