Dva: Problèmes avec React Hooks et dva

useDispatch, après avoir utilisé des crochets, vous n'avez pas besoin de vous connecter, mais pour être paresseux, j'ai sorti tous les effets et réducteurs du magasin, recherché dans l'espace de noms et renvoyé toutes les actions, reportez-vous à :

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

useDispatch, après avoir utilisé des crochets, vous n'avez pas besoin de vous connecter, mais pour être paresseux, j'ai sorti tous les effets et réducteurs du magasin, recherché dans l'espace de noms et renvoyé toutes les actions, reportez-vous à :

function useActions(namespace) {
  const dispatch = useDispatch();

  const actions = useMemo(() => {
    const { _models } = getStore();
    const targetModel = _models.find(model => model.namespace === namespace);
    return targetModel ? Object.keys({ ...targetModel.effects, ...targetModel.reducers }).reduce((prev, curre) => {
      const actionName = curre.replace(new RegExp(`^${namespace}/`), '');
      prev[actionName] = payload => dispatch({ type: curre, payload });
      return prev;
    }, {}) : {};
  }, [namespace, dispatch]);

  return actions;
}

Les responsables semblent avoir supprimé l'utilisation de useDispatch().
À présent
utiliser de cette façon

Où est @UlyC supprimé, pouvez-vous donner un lien ?

Où est @UlyC supprimé, pouvez-vous donner un lien ?

J'avais tort.
Il n'y a pas d'utilisation de useDispatch() dans l'API officielle React Hooks à https://reactjs.org/docs/hooks-reference.html ,
C'est l'utilisation de react-redux https://react-redux.js.org/next/api/hooks#useddispatch , pour importer depuis react-redux
import { useDispatch } from 'react-redux'

Où est @UlyC supprimé, pouvez-vous donner un lien ?

J'avais tort.
Il n'y a pas d'utilisation de useDispatch() dans l'API officielle React Hooks à https://reactjs.org/docs/hooks-reference.html ,
C'est l'utilisation de react-redux https://react-redux.js.org/next/api/hooks#useddispatch , pour importer depuis react-redux
import { useDispatch } from 'react-redux'

= - bien

~ const dispatch = useDispatch(); crochets Ne faites-vous pas la promesse ? ~
L'effet est ajouté à Promise en dva

dva/umi a-t-il envisagé d'intégrer des hooks ? Si vous voulez l'utiliser, devez-vous utiliser import { useDispatch } from 'react-redux' comme ceci. Y aura-t-il des trous.

Je l'ai utilisé, pas de problème

@yoyo837
````
importer { useDispatch } depuis 'dva' ;

console.log('6:23:08 PM', useDispatch)
````
J'imprime undefined comme ça. Dois-je mettre à jour react-redux?vers quelle version ?

mise à niveau dva dernière version bêta

tu ferais mieux de regarder les sorties

J'espère mettre à jour le document après la mise à niveau.Je n'ai pas compris ce que fait la fonction useDispatch.

dva est directement dérivé de react-redux useDispatch , vous pouvez simplement regarder le document react-redux

https://react-redux.js.org/api/hooks#useddispatch

https://www.npmjs.com/package/dva-react-hook

1. Mettez à niveau dva vers la dernière version (ma version est 2.6.0-beta.12)
2.

Adresse de référence : https://react-redux.js.org/api/hooks
J'espère être utile

Antd Pro V4 est mis à niveau vers 2.6beta 12 et peut être utilisé normalement, mais le type de rapport de connexion est incorrect. Voici le message d'erreur de TableList, comment le corriger ?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

@ wangzhipeng404 Utilisez des crochets et pas besoin de composants de connexion

Mais la mise en page et le bloc du cadre pro utilisent conect, dois-je les changer moi-même, existe-t-il un moyen de corriger rapidement ces types d'erreurs

J'ai écrit un cas de test simple, le code suivant est écrit de manière normale et peut être utilisé normalement

import React, { Component } from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

@connect(({ products }) => ({
  products,
}))
export default class Products extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/fetch',
    });
  }
  handleDelete = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  render() {
    const { products } = this.props;
    return (
      <div>
        <h2>List of Products</h2>
        <ProductList onDelete={this.handleDelete} products={products} />
      </div>
    );
  }
}

Plus tard, j'ai fait référence à https://react-redux.js.org/next/api/hooks et j'ai voulu le réécrire en crochets

import React, { useEffect } from 'react';
// import { connect } from 'dva';
import ProductList from '../components/ProductList';
import { useSelector, useDispatch } from 'react-redux';

// https://react-redux.js.org/next/api/hooks

export default function Products() {
  console.info(`useDispatch: `,useDispatch)
  const dispatch = useDispatch();
  const products = useSelector(state => state.products);
  useEffect(() => {
    dispatch({
      type: 'products/fetch',
    });
  });
  const handleDelete = id => {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  };
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
}

Mais cette fois ça donne une erreur

Espérons vivement soutenir les crochets

@liudonghua123 demande cette fois aussi rapidement que de jeter un œil au code source dva.Votre code ci-dessous n'utilise pas dva et ne sert pas comme requis par react-redux, Utilisez dva pour le faire pour vous, c'est bizarre si vous pouvez l'utiliser.

@ liudonghua123 Le soi-disant exemple utilisable ci-dessus est impossible à utiliser sans charger l'initialisation dva, et dva exporte simplement directement le connect, useSelector et d'autres méthodes de react-redux.

@yoyo837 Le code que je peux utiliser normalement ci-dessus fait partie du code, la partie d'initialisation dva est ailleurs, je n'ai pas tout écrit ici, le code est écrit en référence à https://dvajs.com/guide/getting- started.html , je viens de télécharger sur github, https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js , la branche hooks est problématique, la branche master peut être utilisée normalement

J'ai essayé la mise à jour de dva à 2.6.0-beta.14 comme mentionné ci-dessus, le code peut être utilisé normalement sans modification, mais pour l'unification, useSelector , useDispatch changé de dva l'exportation est un peu meilleure toutes les modifications sont
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

Mais la mise en page et le bloc du cadre pro utilisent conect, dois-je les changer moi-même, existe-t-il un moyen de corriger rapidement ces types d'erreurs

Salut, as-tu résolu ce problème ?La version dva_beta utilisée dans antd-pro-ts semble signaler une erreur

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

On dirait que beaucoup de choses sont emballées à l'intérieur

@ liudonghua123 Le soi-disant exemple utilisable ci-dessus est impossible à utiliser sans charger l'initialisation dva, et dva exporte simplement directement le connect, useSelector et d'autres méthodes de react-redux.

C'est logique, ça n'a vraiment pas l'air de pouvoir se mélanger, c'est pas le même principe

Antd Pro V4 est mis à niveau vers 2.6beta 12 et peut être utilisé normalement, mais le type de rapport de connexion est incorrect. Voici le message d'erreur de TableList, comment le corriger ?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“ConnectedComponentClass<typeof TableList, Pick<TableListProps, "form" | "wrappedComponentRef">>”分配给类型“typeof TableList”。
    Type 'Component<Pick<TableListProps, "form" | "wrappedComponentRef">, any, any>' is missing the following properties from type 'TableList': columns, handleStandardTableChange, handleFormReset, toggleForm, and 10 more.

J'ai aussi ce problème, l'as-tu résolu ?

Avec le crochet, vous n'avez plus besoin d'utiliser la connexion.

Avec le crochet, vous n'avez plus besoin d'utiliser la connexion.

Eh bien, mais le projet a été écrit avec des composants de classe auparavant, et la charge de travail de la refactorisation avec des crochets est un peu lourde, et ce type d'avertissement semble trop ennuyeux

Ce problème a été automatiquement marqué comme obsolète, car il n'a pas eu d'activité récente. Il sera fermé s'il n'y a plus d'activité. Merci pour vos contributions.

https://github.com/dvajs/dva/issues/2140#issuecomment -507620628 Heureux d'entendre