我有一个LoginTable组件，这个组件是和其他组件没有任何嵌套关系的

然后，我希望在另一组件中添加一个事件，能控制LoginTable的显示和隐藏

当isLogin 为false的时候，展示LoginTable 组件

action:

reducer:

简言之，如何在reducer 中控制LoginTable 组件的className。。。？

问题补充

我仿照 一楼的答案自己尝试了一下，但是跑不起来

这个例子有两个组件， 一个子组件一个父组件

这是子组件 component1.js 全部代码

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { LogIn, LogOut } from "../actions/action.js";

class Login extends Component {
    constructor (props, context) {
        super (props, context);
    }

    render () {
        if (this.props.loginState) {
            return (
                <div style="width: 100px; 
                            height: 100px;
                            background: red;
                            transition: .5s;
                            color: #fff;
                            font-size: 70px;
                ">
                    登录框
                </div>
            )
        } else {
            return null;
        }
    }
}

export default connect(
    (state) => {
        return {
            loginState: state.loginState
        }   
    },

    (dispatch) => {
        return {
            actions: bindActionCreators({
                LogIn,
                LogOut
            }, dispatch)
        }
    }
)(Login);

这是父组件 component2.js 全部代码

import React, { Component } from "react";
import { render } from "react-dom";
import { bindActionCreators } from "redux";
import { Provider } from "react-redux";
import Login from "../src/component1.js";
import { configureStore } from "../stores/store.js"

class App extends Component {
    constructor (props, context) {
        super (props, context);
        this.showLogin = this.showLogin.bind(this);
    }

    showLogin () {
        let {
            loginState,
            logIn,
            logOut
        } = this.props;

        if (loginState) {
            logOut();
        } else {
            logIn();
        }
    }

    render () {
        return (
            <div>
                <Login />
                <button onClick={this.showLogin}>登录</button>
            </div>
        )
    }
}

let store = configureStore();

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector(".demo"),
    () => console.log(">>>>>> 渲染已经完成啦 <<<<<<")
)

报错的原因是

action

---

1.首先是不推荐改变className的，应该是更加不同state 返回不同的UI
2.把登录state 加到全局state里
3.登陆的state 绑定到登陆组件上。
登陆框组件

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

class Login extends Component {
    constructor(props, context) {
    super(props, context);
  }
  render() {
      if (this.props.loginState) {
          return <登陆框 />
      }
      return null;
  }
}

function mapStateToProps(state) {
  return {
    loginState: state.loginState,
  };
}
// action 创建函数是我们想要通过 props 获取的
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      logIn,
      logOut,
    }, dispatch),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginMain);

其他组件:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import Login from '../components/Login';

class App extends Component {

  constructor(props, context) {

    super(props, context);
      this.showLogin = this.showLogin.bind(this);
  }
  showLogin() {
      this.props.actions.logIn();
  }
  render() {
    return (
        <Login />
        <div onClick={this.showLogin} ></div>
      )
  }
}
function mapStateToProps(state) {
  return {
   //
  };
}
// action 创建函数是我们想要通过 props 获取的
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      logIn,
      logOut,
    }, dispatch),
}

export default App