Javascript 反应：如何从Redux/Flux操作访问组件引用？

在实现诸如Redux或MobX之类的状态容器时，您的状态和事件通常会移动到一个单独的类或对象，而该类或对象不再能够读取引用

例如，在法线组件中：

import Alert from Alert.js;

class Dummy extends React.Component {
  constructor(props) {
    super(props);

    this.state = { clicked: false }
  }

  handleClick() {
    fetch('api').then(function(){
      this.setState({ clicked: true });
      this._alert.show('Cool response!');
    });
  }

  render() {
    return (
      <div>
        <Alert ref={a => this._alert = a} />
        <Button onClick={this.handleClick}/>
      </div>
    )
  }
}

从Alert.js导入警报；
类Dummy扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={clicked:false}
}
handleClick（）{
获取（'api'）。然后（函数（）{
this.setState（{单击：true}）；
这个。_alert.show（'Cool response！'）；
});
}
render（）{
返回(
这个。_alert=a}/>
)
}
}

如果单击该按钮，服务器请求完成后，状态将更新并触发警报。在某些模式库和警报库中，这样使用引用是很常见的

现在，在Redux（或任何Flux实现）中，fetch（）将存在于一个动作中，该动作存在于一个单独的文件中，该文件无权访问

。\u alert

---

在不重写外部“警报”库的情况下，维护功能的最佳方法是什么？

请注意，我来自您的帖子：

这从一开始就是错误的。引用不应在组件之间共享，因为这样会将它们耦合在一起。组件的设计应完全彼此解耦，并根据给定的状态进行反应

问题是ref没有告诉你组件本身的状态，你不知道它是否已安装，你甚至不知道它是否存在，所以你在玩一些不稳定的东西

因此，让我们将所有内容解耦，并适当地利用react/redux的功能，所有代码都应以以下方式组织：

1.减速器： 减速器将保持警报的显示状态。 整个应用程序中的任何组件现在都可以访问它，而不依赖于引用，因此该组件是否确实存在并不重要

const DummyPageReducer = function(state, action) 
{
    if (state === undefined) 
    {
        state = 
        {
            alertShow: false
        };
    }

    switch(action.type) 
    {
        case 'ALERT_DISPLAY':
            return Object.assign({}, state, { alertShow: action.display });
    }
    return state;
}

2.操作和异步操作： 调整警报显示设置的操作，以及执行提取并生成正确结果的异步操作

export const ALERT_DISPLAY = 'ALERT_DISPLAY '
export function alertDisplay(display) 
{
    return {
        type: ALERT_DISPLAY,
        display
    }
}

export function showAlert() 
{   
    return function (dispatch) 
    {  
        fetch('api').then(function()
        {
            dispatch(alertDisplay(true))
        });

    }

}

3.连接的组件： 连接的组件。无需共享ref，将使用ref，但组件将对其给定的道具作出反应，并相应地设置警报

import Alert from Alert.js;

class Dummy extends React.Component 
{
    constructor(props) 
    {
        super(props);

        this.setAlert = this.setAlert.bind(this);
    }

    setAlert()
    {
        if(this.props.alertShow)
            this._alert.show('Cool response!');
        else
            this._alert.hide();

    }

    componenDidMount()
    {
        setAlert();
    }

    componentDidUpdate(prevProps, prevState)
    {
        if(prevProps.alertShow !== this.props.alertShow)
            setAlert();
    }

    render() 
    {
        return 
        (
            <div>
                <Alert ref={a => this._alert = a} />
                <Button onClick={this.props.showAlert}/>
            </div>
        )
    }
}
Dummy = connect(

    state => 
    ({
        alertShow: state.Dummy.alertShow
    }),

    dispatch =>
    ({
        showAlert: () => dispatch(showAlert(true))
    })

)(Dummy);

从Alert.js导入警报；
类Dummy扩展了React.Component
{
建造师（道具）
{
超级（道具）；
this.setAlert=this.setAlert.bind（this）；
}
setAlert（）
{
if（this.props.alertShow）
这个。_alert.show（'Cool response！'）；
其他的
这个。_alert.hide（）；
}
componendimount（）
{
setAlert（）；
}
componentDidUpdate（prevProps、prevState）
{
if（prevProps.alertShow！==此.props.alertShow）
setAlert（）；
}
render（）
{
返回
(
这个。_alert=a}/>
)
}
}
虚拟=连接(
状态=>
({
alertShow:state.Dummy.alertShow
}),
分派=>
({
showAlert:（）=>调度（showAlert（true））
})
)（假人）；

首先，您是否尝试在handleClick中使用箭头功能

handleClick() {
    fetch('api').then(() => {
        this.setState({ clicked: true });
        this._alert.show('Cool response!');
    });
}

这可能会影响本

另一方面，如果使用Redux，则应该创建两个操作。

---

例如，

fetchAPI（）

和

APIfetched（）

在您的操作中，您可以返回一个承诺，即api调用，您可以执行如下操作：

this.props.fetchSomething.then（（）=>this.\u alert.show（'Cool response！'）

您只需确保在操作中返回承诺。返回承诺是一个好主意，但您需要使用一些中间件来允许您的操作返回承诺，如

redux promise middleware

或类似的东西。我认为您忘记在连接的虚拟组件上导入showAlert操作T