如何修复反应原生项目中的“调度不是函数”错误

Question

在 react-native、redux、firebase 项目中，我有一个抽屉组件，它在组件挂载时订阅 onSnapshot 侦听器，并且在卸载时，它调用快照引用。这个组件看起来像这样：

import { onAccountChange } from '../actions/Agenda';    
import {dispatch} from 'redux';

class DrawerContentComponent extends React.Component {
    constructor (props) {
        super(props);
    }
    componentDidMount(){
        this.unsubscribeAccount = firebase.firestore().collection('users').doc(this.props.authUser.uid).onSnapshot((doc) => {
        dispatch({type: types.LOAD_ACCOUNT, payload: doc.data()})

    });
    }
    componentWillUnmount() {
        this.unsubscribeAccount();
    }

    < ...rest of component... >

EDIT:
    const mapStateToProps = ({ account, auth, inbox, agenda }) => {
    const { role, profileImg, legalName, username, rating, phoneNumber } = account;
    const { conversations } = inbox;
    const { authUser } = auth;
    const { events } = agenda;
    return {
        role,
        profileImg,
        legalName,
        username,
        rating,
        phoneNumber,
        authUser,
        conversations,
        events
    };
};

    const mapDispatchToProps = { logoutUser, onProfileChange, onAccountChange, getConversations, getAgenda };

    export default connect(mapStateToProps, mapDispatchToProps)(DrawerContentComponent);
} 

编辑：onAccountChange()：

export const onAccountChange = (uid) => {
    return (dispatch) => {
      firebase.firestore().collection('users').doc(uid).onSnapshot((doc) => {
        dispatch({ type: types.LOAD_ACCOUNT, payload: doc.data() });
      });
    };
};

上述功能是必要的，因为我无法取消订阅该操作，该操作以前放置在外部目录中以进行操作。

问题：我希望能够以某种方式使用已在操作文件 (getAgenda()) 中创建的函数来实现这一点，而不必重写组件中的代码，因为我目前这样做只是为了有能力在卸载时取消订阅侦听器，这是我想使它工作的唯一方法。

理想情况下，id 喜欢做这样的事情：

componentDidMount() {
  this.unsubscribeAgenda = this.props.getAgenda();
}
componentWillUnmount() {
  this.unsubscribeAgenda();
}

但是上面的结果是： TypeError: 'dispatch is not a function' 如果我取出 dispatch 导入，错误是 ReferenceError: Cant find variable: dispatch，我显然需要为 onSnapshot 侦听器调度更改

有什么策略可以解决这个问题？

Answer 1

你不能直接从 redux 导入 dispatch。

您需要使用 react-redux 的 connect() 函数将您的动作创建者与 dispatch 包装起来，或者直接从中获取 dispatch。

如果您使用的是功能组件，您可以使用useDispatch 来访问它。

如果您不想使用常规的 react-redux 选项之一，您可以从您的商店导出调度，然后从您创建商店的位置导入它。

export const dispatch = store.dispatch

如果您的 firestore 的大部分逻辑都在 redux thunk 操作中（或具有异步功能的类似操作），请使用 connect 将操作包装在 dispatch 中，然后按照您的理想运行它。从 thunk 操作返回的任何内容也会从调用中返回，因此您应该能够将其设置为返回取消订阅功能。

 connect({},{onAccountChange})(DrawerContentComponent)

然后您可以使用以下方式调度 onAccountChange 操作创建者：

this.props.onAccountChange()

编辑：

将您的 onAccountChange 函数修改为此，以便您的 thunk 返回您的取消订阅函数。

export const onAccountChange = (uid) => {
  return (dispatch) => {
    return firebase
      .firestore()
      .collection('users')
      .doc(uid)
      .onSnapshot((doc) => {
        dispatch({ type: types.LOAD_ACCOUNT, payload: doc.data() });
      });
  };
};

然后您只需将 onAccountChange 添加到 mapDispatch 到 props 并在您的 componentDidMount 方法中使用它：

this.unsubscribeAccount = this.props.onAccountChange();

Answer 2

为了使组件被附加到存储以用于调度操作或映射道具，它与connect(mapStateToProps, mapDispatchToProps)(Component) 一起使用。在你的情况下，没有传递给组件的道具，所以我只发送null 为mapStateToProps

（假设您在某个父组件 REDUX. I cant understand how to connect a component defined as a class extending React.Component in order to read the store 中使用了 Provider）

---

 import { connect } from 'react-redux';

 class DrawerContentComponent extends React.Component {
    ...rest code...
   componentDidMount() {
     this.unsubscribeAgenda = this.props.getAgenda();
    }
   componentWillUnmount() {
    this.unsubscribeAgenda();
    }
   }
  export default connect(null, { getAgenda })(DrawerContentComponent)