如何解决反应原生项目中 "dispatch不是函数 "的错误

在一个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())而不需要重写组件中的代码,因为目前我所做的只是为了在卸载时能够取消订阅监听器,这是我想到的唯一能让它工作的方法。

理想情况下,我想做这样的事情。

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

但上面的结果是:TypeError: 'dispatch is not a function' 如果我取出 dispatch 导入,错误是 ReferenceError: Cant find variable: dispatch很明显,我需要派遣改变一个 onSnapshot 听者

有什么策略可以处理这个问题?

解决方案:

你不能直接从redux导入dispatch。

你需要使用react-redux的connect()函数来用dispatch包装你的动作创建者,或者直接从它那里获取dispatch。

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

如果你不想使用正常的react-redux选项之一,你可以从你的商店导出dispatch,然后从你创建商店的地方导入它。

export const dispatch = store.dispatch

如果你的firestore的大部分逻辑是在redux thunk动作中(或类似的具有异步功能的动作),使用connect来获取被dispatch包裹的动作,并在最后像你的理想中那样运行它。无论你从thunk动作中返回的是什么,也会从调用中返回,所以你应该可以设置成返回退订函数。

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

然后你可以使用onAccountChange动作创建者调度。

this.props.onAccountChange()

编辑:

将你的onAccountChange函数修改为这样,这样你的thunk就可以返回你的unsubibe函数了。

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 to props中,然后在你的 componentDidMount 方法。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

需要帮助在ssrs中写表达式来计算一个基于条件的字段。

2022-9-8 11:33:18

未分类

在AWS上部署Web应用程序

2022-9-8 11:33:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索