Dva: Probleme mit React Hooks und dva

useDispatch, nachdem Sie Hooks verwendet haben, müssen Sie sich nicht verbinden, aber um faul zu sein, habe ich alle Effekte und Reduzierer aus dem Store entfernt, den Namensraum durchsucht und alle Aktionen zurückgegeben, siehe:

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, nachdem Sie Hooks verwendet haben, müssen Sie sich nicht verbinden, aber um faul zu sein, habe ich alle Effekte und Reduzierer aus dem Store entfernt, den Namensraum durchsucht und alle Aktionen zurückgegeben, siehe:

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;
}

Beamte scheinen die Verwendung von useDispatch() entfernt zu haben.
Jetzt
Verwenden Sie diesen Weg

Wo wurde @UlyC entfernt, können Sie einen Link geben?

Wo wurde @UlyC entfernt, können Sie einen Link geben?

Ich habe mich geirrt.
Es gibt keine Verwendung von useDispatch() in der offiziellen React Hooks API unter https://reactjs.org/docs/hooks-reference.html ,
Dies ist die Verwendung von React-Redux https://react-redux.js.org/next/api/hooks#useddispatch , um aus React-Redux zu importieren
import { useDispatch } from 'react-redux'

Wo wurde @UlyC entfernt, können Sie einen Link geben?

Ich habe mich geirrt.
Es gibt keine Verwendung von useDispatch() in der offiziellen React Hooks API unter https://reactjs.org/docs/hooks-reference.html ,
Dies ist die Verwendung von React-Redux https://react-redux.js.org/next/api/hooks#useddispatch , um aus React-Redux zu importieren
import { useDispatch } from 'react-redux'

= - gut

~ const dispatch = useDispatch(); Hooks Willst du es nicht versprechen? ~
Der Effekt wird Promise in dva hinzugefügt

Hat dva/umi darüber nachgedacht, Hooks zu integrieren? Wenn Sie es verwenden möchten, müssen Sie import { useDispatch } from 'react-redux' so verwenden. Wird es Löcher geben.

Ich habe es benutzt, kein Problem

@yoyo837
````
import { useDispatch } from 'dva';

console.log('6:23:08 PM', useDispatch)
````
Ich drucke undefined so aus.Soll ich React-Redux upgraden?zu welcher Version?

Aktualisieren Sie die neueste Beta-Version von dva

Sieh dir besser die Veröffentlichungen an

Ich hoffe, das Dokument nach dem Upgrade zu aktualisieren.Ich habe nicht herausgefunden, was die useDispatch-Funktion macht.

dva ist direkt von react-redux useDispatch abgeleitet, Sie können sich einfach das Dokument react-redux ansehen

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

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

1. Aktualisieren Sie dva auf die neueste Version (meine Version ist 2.6.0-beta.12)
2.

Referenzadresse: https://react-redux.js.org/api/hooks
Ich hoffe hilfreich zu sein

Antd Pro V4 wurde auf 2.6beta 12 aktualisiert und kann normal verwendet werden, aber die Art des Verbindungsberichts ist falsch. Das Folgende ist die Fehlermeldung von TableList, wie kann sie behoben werden?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“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 Haken verwenden und keine Verbindungskomponenten benötigen

Aber das Layout und der Block des Pro-Frameworks verwenden conect, muss ich sie selbst ändern, gibt es eine Möglichkeit, diese Art von Fehlern schnell zu beheben

Ich habe einen einfachen Testfall geschrieben, der folgende Code ist normal geschrieben und kann normal verwendet werden

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>
    );
  }
}

Später habe ich auf https://react-redux.js.org/next/api/hooks verwiesen und wollte es in Hooks umschreiben

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>
  );
}

Aber dieses Mal gibt es einen Fehler

Hoffe stark, Haken zu unterstützen

@liudonghua123 fragt diesmal so schnell wie ein Blick in den dva-Quellcode.Ihr Code unten verwendet kein dva und erfüllt nicht die Anforderungen von React-Redux, Verwenden Sie dva, um dies für Sie zu tun, es ist seltsam, wenn Sie es verwenden können.

@ liudonghua123 Das sogenannte verwendbare Beispiel oben kann nicht verwendet werden, ohne die dva-Initialisierung zu laden, und dva exportiert einfach direkt connect, useSelector und andere Methoden von React-Redux.

@yoyo837 Der Code, den ich normalerweise oben verwenden kann, ist Teil des Codes, der dva-Initialisierungsteil ist woanders, ich habe hier nicht alles geschrieben, der Code ist unter Bezugnahme auf https://dvajs.com/guide/getting- geschrieben. https://github.com/liudonghua123/dva-quickstart/blob/hooks/src/routes/Products.js , der hooks branch ist problematisch, der master branch kann normal verwendet werden

Ich habe das Update von dva auf 2.6.0-beta.14 wie oben erwähnt versucht, der Code kann normal ohne Änderung verwendet werden, aber zur Vereinheitlichung wurde useSelector von useDispatch geändert dva Export ist etwas besser alle Modifikationen sind
https://github.com/liudonghua123/dva-quickstart/commit/f9bd1dd1332e62739d15050c4d50bc069a7fb58f

Aber das Layout und der Block des Pro-Frameworks verwenden conect, muss ich sie selbst ändern, gibt es eine Möglichkeit, diese Art von Fehlern schnell zu beheben

Hallo, hast du dieses Problem gelöst?Die in antd-pro-ts verwendete dva_beta-Version scheint einen Fehler zu melden

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

Es fühlt sich an, als wäre eine Menge Zeug hineingepackt

@ liudonghua123 Das sogenannte verwendbare Beispiel oben kann nicht verwendet werden, ohne die dva-Initialisierung zu laden, und dva exportiert einfach direkt connect, useSelector und andere Methoden von React-Redux.

Es macht Sinn, es scheint wirklich nicht möglich zu sein, es zu mischen, es ist nicht das gleiche Prinzip

Antd Pro V4 wurde auf 2.6beta 12 aktualisiert und kann normal verwendet werden, aber die Art des Verbindungsberichts ist falsch. Das Folgende ist die Fehlermeldung von TableList, wie kann sie behoben werden?

作为表达式调用时，无法解析类修饰器的签名。
  不能将类型“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.

Ich habe dieses Problem auch, hast du es gelöst?

Mit Hook müssen Sie Connect nicht erneut verwenden.

Mit Hook müssen Sie Connect nicht erneut verwenden.

Nun, aber das Projekt wurde zuvor mit Klassenkomponenten geschrieben, und der Arbeitsaufwand für das Refactoring mit Hooks ist ein bisschen hoch, und diese Art von Warnung sieht zu nervig aus

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität gab. Es wird geschlossen, wenn keine weiteren Aktivitäten stattfinden. Vielen Dank für Ihre Beiträge.

https://github.com/dvajs/dva/issues/2140#issuecomment -507620628 Freut mich zu hören