React redux 调度不可用

Posted 2023-02-22

【中文标题】React redux 调度不可用

【英文标题】：React redux dispatch not available

【发布时间】：2018-06-28 20:13:59

【问题描述】：

最初我在index.js 打了这个电话来触发我的主要数据的加载：

const store = configureStore();
store.dispatch(doStuff());

现在我想做下一步并在页面级别加载这些数据（似乎更好）。

---

我以 Gaearon 在Redux github 的这篇帖子为基础：

---

我有这个代码：

import React,  Component  from 'react';
import  connect  from 'react-redux';
import  PropTypes  from 'prop-types';
import  bindActionCreators  from 'redux';
import * as myActions from '../../actions/myActions';
import  MuiThemeProvider  from 'material-ui/styles';

let createHandlers = function(dispatch) 
    let doStuff = function() 
      dispatch(myActions.doStuff())
    ;

    return 
        doStuff,
      // other handlers
    ;
  


class MyPage extends Component 
    constructor(props, context) 
        super(props, context);

        this.handlers = createHandlers(this.props.dispatch);
        //this.handlers.doStuff();

        this.state = 
            myStuff: []
        
    

    render() 
        return (
            <MuiThemeProvider>
                <div>...</div>
            </MuiThemeProvider>
        );
    


function mapStateToProps(state, ownProps) 
    return 
        // Set state
    ;


function mapDispatchToProps(dispatch) 
    return 
        // Set state
    ;


MyPage.propTypes = 
        // My props


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

---

问题

当我取消注释该行时，我收到此错误：

TypeError: dispatch is not a function

let doStuff = function()   
   dispatch(myActions.doStuff()) 
;

我看到的（最重要的）区别是我做映射：

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

我需要做什么才能让它工作？

可能很简单，但我没看到。

【问题讨论】：

github.com/kalaikt/reactjs/blob/master/src/js/view/profile/…希望对你有帮助

为什么不在mapDispatchToProps 内完成所有dispatch() 调用？你真的需要在你的组件内部调用 dispatch（这与在同一个文件中不同）吗？

【参考方案1】：

天啊……我根本不需要 Gaearon 的剧本。我所要做的就是从构造函数中调用动作列表：

class MyPage extends Component 
    constructor(props, context) 
        super(props, context);

        props.actions.doStuff();

        this.state = 
            myStuff: []
        
    

    render() 
        return (
            <MuiThemeProvider>
                <div>...</div>
            </MuiThemeProvider>
        );
    

这是重要的一行：

props.actions.doStuff();

这是可用的，因为它映射到mapDispatchToProps：

function mapDispatchToProps(dispatch) 
    return 
        actions: bindActionCreators(loadOrderActions, dispatch)
    ;

【参考方案2】：

Connect's react-redux docs 解释一下：

如果您不提供自己的 mapDispatchToProps 函数或对象 充满动作创建者，默认的 mapDispatchToProps 实现 只需将 dispatch 注入组件的 props 即可。

当您不将 mapDispatchToProps 参数传递给 connect 时，react-redux 会将 dispatch 作为 prop 传递给被包装的组件。

如果您将mapDispatchToProps 传递给connect，则会传递包装的操作而不是dispatch，并且this.props.dispatch 是未定义的。

因此，如果您的组件中需要dispatch，请避免使用mapDispatchToProps，或者将您的所有操作都用dispatch 封装在mapDispatchToProps 中。

【讨论】：

我确实想要mapDispatchToProps 方法，因为这就是我更新状态的方式。那么，解决方案是什么？

解决方案是在mapDispatchToProps 中使用dispatch 包装您的操作。