react,在对redux中的stroe修改后，怎么样让其他组件发送状态改变呢

Question

例如 组件A中，onClick后将store中的，loading:true变为loading:false，组件B怎么才能监听这个事件，在loading发生变化后去改变自身内部的state呢，小白问题。。。求大佬赐教

Answer 1

用react-redux，通过connect连接，例子如下：

import React, { Component } from "react"
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
// 登录action
import { login, saveSerInfo } from '../action/loginAction'
import { LoginForm } from '../Component/login/loginForm'

@connect(
    state => ({
        loginInfo: state.loginInfo    // 这里就是你要自动改变的并显示信息
    }),
    dispatch => ({
        // dispatch: dispatch,
        login: bindActionCreators(login, dispatch) // 绑定一个触发action的方法 引入 redux-thunk这个中间件会更方便
    })
)
export default class Login extends Component {
        login = (serAddr, serPort) => {
            this.props.login(serAddr, serPort)
        }
        render() {
            let {loginInfo, saveSerInfo} = this.props
            return (
                <div className="login-bg">
                    <LoginForm loginInfo={ loginInfo } login={ this.login } saveSerInfo={saveSerInfo}/>
            </div>
            )
        }
    }